stuff

src/components/ui.tsx

@@ -42,10 +42,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     <button
       ref={ref}
       className={cx(
-        'msk-btn',
-        variant !== 'key' && `msk-btn--${variant}`,
-        size === 'sm' && 'msk-btn--sm',
-        iconOnly && 'msk-btn--icon',
+        'modern-sk-btn',
+        variant !== 'key' && `modern-sk-btn--${variant}`,
+        size === 'sm' && 'modern-sk-btn--sm',
+        iconOnly && 'modern-sk-btn--icon',
         className,
       )}
       {...props}
@@ -59,7 +59,7 @@ export const TextField = forwardRef<
   HTMLInputElement,
   ComponentPropsWithoutRef<'input'>
 >(({ className, ...props }, ref) => (
-  <input ref={ref} className={cx('msk-field', className)} {...props} />
+  <input ref={ref} className={cx('modern-sk-field', className)} {...props} />
 ));
 TextField.displayName = 'TextField';
 
@@ -67,7 +67,7 @@ export const TextArea = forwardRef<
   HTMLTextAreaElement,
   ComponentPropsWithoutRef<'textarea'>
 >(({ className, ...props }, ref) => (
-  <textarea ref={ref} className={cx('msk-field', className)} {...props} />
+  <textarea ref={ref} className={cx('modern-sk-field', className)} {...props} />
 ));
 TextArea.displayName = 'TextArea';
 
@@ -75,7 +75,7 @@ export const SearchField = ({
   icon,
   ...props
 }: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
-  <div className="msk-search">
+  <div className="modern-sk-search">
     <span className="ph">{icon}</span>
     <TextField {...props} />
   </div>
@@ -103,15 +103,15 @@ export const Select = ({
     defaultValue={defaultValue}
     onValueChange={onValueChange}
   >
-    <RSelect.Trigger className="msk-select" aria-label={rest['aria-label']}>
+    <RSelect.Trigger className="modern-sk-select" aria-label={rest['aria-label']}>
       <RSelect.Value placeholder={placeholder} />
-      <RSelect.Icon className="msk-select__icon">
+      <RSelect.Icon className="modern-sk-select__icon">
         <CaretDown size={12} weight="bold" />
       </RSelect.Icon>
     </RSelect.Trigger>
     <RSelect.Portal>
       <RSelect.Content
-        className="msk-select__content"
+        className="modern-sk-select__content"
         position="popper"
         sideOffset={6}
       >
@@ -120,10 +120,10 @@ export const Select = ({
             <RSelect.Item
               key={it.value}
               value={it.value}
-              className="msk-select__item"
+              className="modern-sk-select__item"
             >
               <RSelect.ItemText>{it.label}</RSelect.ItemText>
-              <RSelect.ItemIndicator className="msk-select__item-indicator">
+              <RSelect.ItemIndicator className="modern-sk-select__item-indicator">
                 <Check size={14} weight="bold" />
               </RSelect.ItemIndicator>
             </RSelect.Item>
@@ -138,8 +138,8 @@ export const Select = ({
 export const Switch = (
   props: ComponentPropsWithoutRef<typeof RSwitch.Root>,
 ) => (
-  <RSwitch.Root className="msk-switch" {...props}>
-    <RSwitch.Thumb className="msk-switch__thumb" />
+  <RSwitch.Root className="modern-sk-switch" {...props}>
+    <RSwitch.Thumb className="modern-sk-switch__thumb" />
   </RSwitch.Root>
 );
 
@@ -147,8 +147,8 @@ export const Switch = (
 export const Checkbox = (
   props: ComponentPropsWithoutRef<typeof RCheckbox.Root>,
 ) => (
-  <RCheckbox.Root className="msk-check" {...props}>
-    <RCheckbox.Indicator className="msk-check__indicator">
+  <RCheckbox.Root className="modern-sk-check" {...props}>
+    <RCheckbox.Indicator className="modern-sk-check__indicator">
       <svg
         viewBox="0 0 24 24"
         fill="none"
@@ -169,8 +169,8 @@ export const RadioItem = ({
   value,
   ...props
 }: ComponentPropsWithoutRef<typeof RRadioGroup.Item>) => (
-  <RRadioGroup.Item className="msk-radio" value={value} {...props}>
-    <RRadioGroup.Indicator className="msk-radio__indicator" />
+  <RRadioGroup.Item className="modern-sk-radio" value={value} {...props}>
+    <RRadioGroup.Indicator className="modern-sk-radio__indicator" />
   </RRadioGroup.Item>
 );
 
@@ -182,7 +182,7 @@ export const Control = ({
   children: ReactNode;
   control: ReactNode;
 }) => (
-  <label className="msk-control">
+  <label className="modern-sk-control">
     {control}
     {children}
   </label>
@@ -201,7 +201,7 @@ export const SegmentedControl = ({
 }: SegProps) => (
   <RToggleGroup.Root
     type="single"
-    className="msk-seg"
+    className="modern-sk-seg"
     value={value}
     onValueChange={(v) => v && onValueChange(v)}
   >
@@ -209,7 +209,7 @@ export const SegmentedControl = ({
       <RToggleGroup.Item
         key={it.value}
         value={it.value}
-        className="msk-seg__item"
+        className="modern-sk-seg__item"
       >
         {it.label}
       </RToggleGroup.Item>
@@ -221,11 +221,11 @@ export const SegmentedControl = ({
 export const Slider = (
   props: ComponentPropsWithoutRef<typeof RSlider.Root>,
 ) => (
-  <RSlider.Root className="msk-slider" {...props}>
-    <RSlider.Track className="msk-slider__track">
-      <RSlider.Range className="msk-slider__range" />
+  <RSlider.Root className="modern-sk-slider" {...props}>
+    <RSlider.Track className="modern-sk-slider__track">
+      <RSlider.Range className="modern-sk-slider__range" />
     </RSlider.Track>
-    <RSlider.Thumb className="msk-slider__thumb" aria-label="Value" />
+    <RSlider.Thumb className="modern-sk-slider__thumb" aria-label="Value" />
   </RSlider.Root>
 );
 
@@ -237,7 +237,7 @@ export const Stepper = ({
   onDecrement: () => void;
   onIncrement: () => void;
 }) => (
-  <div className="msk-stepper">
+  <div className="modern-sk-stepper">
     <button type="button" onClick={onDecrement} aria-label="Decrease">
       −
     </button>
@@ -254,12 +254,12 @@ export const TabsList = ({
 }: {
   items: Array<{ value: string; label: string }>;
 }) => (
-  <RTabs.List className="msk-tabs">
+  <RTabs.List className="modern-sk-tabs">
     {items.map((it) => (
       <RTabs.Trigger
         key={it.value}
         value={it.value}
-        className="msk-tabs__trigger"
+        className="modern-sk-tabs__trigger"
       >
         {it.label}
       </RTabs.Trigger>
@@ -270,9 +270,9 @@ export const TabsContent = RTabs.Content;
 
 /* ---------- PROGRESS ---------- */
 export const Progress = ({ value = 0 }: { value?: number }) => (
-  <RProgress.Root className="msk-progress" value={value}>
+  <RProgress.Root className="modern-sk-progress" value={value}>
     <RProgress.Indicator
-      className="msk-progress__indicator"
+      className="modern-sk-progress__indicator"
       style={{ width: `${value}%` }}
     />
   </RProgress.Root>
@@ -292,9 +292,9 @@ export const Badge = ({
 }) => (
   <span
     className={cx(
-      'msk-badge',
-      `msk-badge--${variant}`,
-      dot && 'msk-badge--dot',
+      'modern-sk-badge',
+      `modern-sk-badge--${variant}`,
+      dot && 'modern-sk-badge--dot',
       className,
     )}
     {...props}
@@ -311,7 +311,7 @@ export const Chip = ({
   children: ReactNode;
   onRemove?: () => void;
 }) => (
-  <span className="msk-chip">
+  <span className="modern-sk-chip">
     {children}
     {onRemove && (
       <button type="button" className="x" onClick={onRemove} aria-label="Remove">
@@ -326,7 +326,7 @@ export const Card = ({
   className,
   ...props
 }: ComponentPropsWithoutRef<'div'>) => (
-  <div className={cx('msk-card', className)} {...props} />
+  <div className={cx('modern-sk-card', className)} {...props} />
 );
 
 /* ---------- LIST ---------- */
@@ -334,7 +334,7 @@ export const List = ({
   className,
   ...props
 }: ComponentPropsWithoutRef<'div'>) => (
-  <div className={cx('msk-list', className)} {...props} />
+  <div className={cx('modern-sk-list', className)} {...props} />
 );
 export const Row = ({
   selected,
@@ -342,7 +342,7 @@ export const Row = ({
   ...props
 }: ComponentPropsWithoutRef<'div'> & { selected?: boolean }) => (
   <div
-    className={cx('msk-row', selected && 'is-selected', className)}
+    className={cx('modern-sk-row', selected && 'is-selected', className)}
     {...props}
   />
 );
@@ -355,7 +355,7 @@ export const MenuContent = ({
   ...props
 }: ComponentPropsWithoutRef<typeof RMenu.Content>) => (
   <RMenu.Portal>
-    <RMenu.Content className="msk-menu" sideOffset={6} {...props}>
+    <RMenu.Content className="modern-sk-menu" sideOffset={6} {...props}>
       {children}
     </RMenu.Content>
   </RMenu.Portal>
@@ -369,19 +369,19 @@ export const MenuItem = ({
   icon?: ReactNode;
   shortcut?: string;
 }) => (
-  <RMenu.Item className="msk-menu-item" {...props}>
+  <RMenu.Item className="modern-sk-menu-item" {...props}>
     {icon && <span className="ph">{icon}</span>}
     {children}
     {shortcut && <span className="sc">{shortcut}</span>}
   </RMenu.Item>
 );
 export const MenuSeparator = () => (
-  <RMenu.Separator className="msk-menu-sep" />
+  <RMenu.Separator className="modern-sk-menu-sep" />
 );
 
 /* Static menu surface — for showcasing the menu without a trigger. */
 export const MenuSurface = ({ children }: { children: ReactNode }) => (
-  <div className="msk-menu">{children}</div>
+  <div className="modern-sk-menu">{children}</div>
 );
 export const MenuRow = ({
   icon,
@@ -392,7 +392,7 @@ export const MenuRow = ({
   shortcut?: string;
   children: ReactNode;
 }) => (
-  <div className="msk-menu-item">
+  <div className="modern-sk-menu-item">
     {icon && <span className="ph">{icon}</span>}
     {children}
     {shortcut && <span className="sc">{shortcut}</span>}
@@ -410,7 +410,7 @@ export const Tooltip = ({
   <RTooltip.Root>
     <RTooltip.Trigger asChild>{children}</RTooltip.Trigger>
     <RTooltip.Portal>
-      <RTooltip.Content className="msk-tooltip" sideOffset={6}>
+      <RTooltip.Content className="modern-sk-tooltip" sideOffset={6}>
         {content}
       </RTooltip.Content>
     </RTooltip.Portal>
@@ -427,10 +427,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     <button
       ref={ref}
       className={cx(
-        'msk-btn',
-        'msk-iconbtn',
-        variant !== 'key' && `msk-btn--${variant}`,
-        size && `msk-iconbtn--${size}`,
+        'modern-sk-btn',
+        'modern-sk-iconbtn',
+        variant !== 'key' && `modern-sk-btn--${variant}`,
+        size && `modern-sk-iconbtn--${size}`,
         className,
       )}
       {...props}
@@ -447,12 +447,12 @@ export const Spinner = ({
   className,
   ...props
 }: ComponentPropsWithoutRef<'span'> & { size?: 'sm' | 'lg' }) => {
-  const gid = `msk-groove-${useId()}`;
+  const gid = `modern-sk-groove-${useId()}`;
   return (
     <span
       role="status"
       aria-label="Loading"
-      className={cx('msk-spinner', size && `msk-spinner--${size}`, className)}
+      className={cx('modern-sk-spinner', size && `modern-sk-spinner--${size}`, className)}
       {...props}
     >
       <svg viewBox="0 0 36 36" fill="none">
@@ -473,7 +473,7 @@ export const Spinner = ({
         <circle cx="18" cy="18" r="14" stroke={`url(#${gid})`} strokeWidth="5" />
         {/* glossy lime arc, nested inside the groove with rounded ends */}
         <circle
-          className="msk-spinner__arc"
+          className="modern-sk-spinner__arc"
           cx="18"
           cy="18"
           r="14"
@@ -498,9 +498,9 @@ export const Callout = ({
   icon?: ReactNode;
   children: ReactNode;
 }) => (
-  <div className={cx('msk-callout', variant !== 'info' && `msk-callout--${variant}`)}>
-    {icon && <span className="msk-callout__icon">{icon}</span>}
-    <div className="msk-callout__body">{children}</div>
+  <div className={cx('modern-sk-callout', variant !== 'info' && `modern-sk-callout--${variant}`)}>
+    {icon && <span className="modern-sk-callout__icon">{icon}</span>}
+    <div className="modern-sk-callout__body">{children}</div>
   </div>
 );
 
@@ -509,8 +509,8 @@ export const Table = ({
   children,
   ...props
 }: ComponentPropsWithoutRef<'table'>) => (
-  <div className="msk-table-wrap">
-    <table className="msk-table" {...props}>
+  <div className="modern-sk-table-wrap">
+    <table className="modern-sk-table" {...props}>
       {children}
     </table>
   </div>
@@ -537,15 +537,15 @@ export const ScrollArea = ({
   className?: string;
   style?: CSSProperties;
 }) => (
-  <RScrollArea.Root className={cx('msk-scroll', className)} style={style}>
-    <RScrollArea.Viewport className="msk-scroll__viewport">
+  <RScrollArea.Root className={cx('modern-sk-scroll', className)} style={style}>
+    <RScrollArea.Viewport className="modern-sk-scroll__viewport">
       {children}
     </RScrollArea.Viewport>
-    <RScrollArea.Scrollbar className="msk-scroll__bar" orientation="vertical">
-      <RScrollArea.Thumb className="msk-scroll__thumb" />
+    <RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="vertical">
+      <RScrollArea.Thumb className="modern-sk-scroll__thumb" />
     </RScrollArea.Scrollbar>
-    <RScrollArea.Scrollbar className="msk-scroll__bar" orientation="horizontal">
-      <RScrollArea.Thumb className="msk-scroll__thumb" />
+    <RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="horizontal">
+      <RScrollArea.Thumb className="modern-sk-scroll__thumb" />
     </RScrollArea.Scrollbar>
     <RScrollArea.Corner />
   </RScrollArea.Root>
@@ -572,21 +572,21 @@ export const Dialog = ({
   <RDialog.Root open={open} onOpenChange={onOpenChange}>
     {trigger && <RDialog.Trigger asChild>{trigger}</RDialog.Trigger>}
     <RDialog.Portal>
-      <RDialog.Overlay className="msk-overlay" />
-      <RDialog.Content className="msk-dialog">
-        <RDialog.Title className="msk-dialog__title">{title}</RDialog.Title>
+      <RDialog.Overlay className="modern-sk-overlay" />
+      <RDialog.Content className="modern-sk-dialog">
+        <RDialog.Title className="modern-sk-dialog__title">{title}</RDialog.Title>
         {description && (
-          <RDialog.Description className="msk-dialog__desc">
+          <RDialog.Description className="modern-sk-dialog__desc">
             {description}
           </RDialog.Description>
         )}
-        {children && <div className="msk-dialog__body">{children}</div>}
-        {footer && <div className="msk-dialog__footer">{footer}</div>}
+        {children && <div className="modern-sk-dialog__body">{children}</div>}
+        {footer && <div className="modern-sk-dialog__footer">{footer}</div>}
         <RDialog.Close asChild>
           <IconButton
             variant="ghost"
             size="sm"
-            className="msk-dialog__close"
+            className="modern-sk-dialog__close"
             aria-label="Close"
           >
             <X size={14} weight="bold" />
@@ -624,17 +624,17 @@ export const AlertDialog = ({
   <RAlertDialog.Root open={open} onOpenChange={onOpenChange}>
     {trigger && <RAlertDialog.Trigger asChild>{trigger}</RAlertDialog.Trigger>}
     <RAlertDialog.Portal>
-      <RAlertDialog.Overlay className="msk-overlay" />
-      <RAlertDialog.Content className="msk-dialog">
-        <RAlertDialog.Title className="msk-dialog__title">
+      <RAlertDialog.Overlay className="modern-sk-overlay" />
+      <RAlertDialog.Content className="modern-sk-dialog">
+        <RAlertDialog.Title className="modern-sk-dialog__title">
           {title}
         </RAlertDialog.Title>
         {description && (
-          <RAlertDialog.Description className="msk-dialog__desc">
+          <RAlertDialog.Description className="modern-sk-dialog__desc">
             {description}
           </RAlertDialog.Description>
         )}
-        <div className="msk-dialog__footer">
+        <div className="modern-sk-dialog__footer">
           <RAlertDialog.Cancel asChild>
             <Button variant="ghost">{cancelLabel}</Button>
           </RAlertDialog.Cancel>
@@ -662,11 +662,11 @@ export const Window = ({
   title: string;
   badge?: ReactNode;
 }) => (
-  <div className="msk-window" {...props}>
-    <div className="msk-titlebar">
-      <span className="msk-traffic r" />
-      <span className="msk-traffic y" />
-      <span className="msk-traffic g" />
+  <div className="modern-sk-window" {...props}>
+    <div className="modern-sk-titlebar">
+      <span className="modern-sk-traffic r" />
+      <span className="modern-sk-traffic y" />
+      <span className="modern-sk-traffic g" />
       <span className="ttl">{title}</span>
       {badge && (
         <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>