feat(core): add popover component (#615)

packages/utils/src/string/casing.ts

@@ -5,3 +5,7 @@ export function pascalCase(str: string): string {
 export function camelCase(str: string): string {
   return pascalCase(str).replace(/^(.)/, (_, c) => c.toLowerCase());
 }
+
+export function kebabCase(str: string): string {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}

packages/utils/src/string/tests/casing.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { camelCase, pascalCase } from '../casing';
+import { camelCase, kebabCase, pascalCase } from '../casing';
 
 describe('casing', () => {
   describe('pascalCase', () => {
@@ -41,4 +41,22 @@ describe('casing', () => {
       expect(camelCase('hello_world')).toBe('helloWorld');
     });
   });
+
+  describe('kebabCase', () => {
+    it('converts camelCase', () => {
+      expect(kebabCase('positionAnchor')).toBe('position-anchor');
+    });
+
+    it('converts PascalCase', () => {
+      expect(kebabCase('PositionAnchor')).toBe('-position-anchor');
+    });
+
+    it('preserves lowercase', () => {
+      expect(kebabCase('margin')).toBe('margin');
+    });
+
+    it('does not special-case CSS custom properties', () => {
+      expect(kebabCase('--media-popover-offset')).toBe('--media-popover-offset');
+    });
+  });
 });