@ropav/styles 0.4.0 → 0.5.0

package/src/components/autocomplete/autocomplete.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const autocompleteVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -24,6 +25,17 @@ export const autocompleteVariants = tv({
         trigger: "autocomplete__trigger--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "autocomplete--lg",
+        popover: "autocomplete__popover--lg",
+      },
+      md: {},
+      sm: {
+        base: "autocomplete--sm",
+        popover: "autocomplete__popover--sm",
+      },
+    },
     variant: {
       primary: {
         base: "autocomplete--primary",

package/src/components/color-input-group/color-input-group.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const colorInputGroupVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -20,6 +21,15 @@ export const colorInputGroupVariants = tv({
         base: "color-input-group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "color-input-group--lg",
+      },
+      md: {},
+      sm: {
+        base: "color-input-group--sm",
+      },
+    },
     variant: {
       primary: {
         base: "color-input-group--primary",

package/src/components/combo-box/combo-box.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const comboBoxVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
   },
   slots: {
     base: "combo-box",
@@ -21,6 +22,17 @@ export const comboBoxVariants = tv({
         inputGroup: "combo-box__input-group--full-width",
       },
     },
+    /* The field itself is the `Input` inside, which takes its own size class from the context the
+     * root provides. Only the popover is left, and it is teleported out of this tree. */
+    size: {
+      lg: {
+        popover: "combo-box__popover--lg",
+      },
+      md: {},
+      sm: {
+        popover: "combo-box__popover--sm",
+      },
+    },
   },
 });
 

package/src/components/date-input-group/date-input-group.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const dateInputGroupVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -22,6 +23,15 @@ export const dateInputGroupVariants = tv({
         base: "date-input-group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "date-input-group--lg",
+      },
+      md: {},
+      sm: {
+        base: "date-input-group--sm",
+      },
+    },
     variant: {
       primary: {
         base: "date-input-group--primary",

package/src/components/index.ts

@@ -61,11 +61,14 @@ export * from "./radio";
 export * from "./radio-group";
 export * from "./scroll-shadow";
 export * from "./search-field";
+export * from "./segmented-control";
 export * from "./select";
 export * from "./separator";
+export * from "./sidebar";
 export * from "./skeleton";
 export * from "./slider";
 export * from "./spinner";
+export * from "./splitter";
 export * from "./surface";
 export * from "./switch";
 export * from "./switch-group";
@@ -82,3 +85,4 @@ export * from "./toggle-button";
 export * from "./toggle-button-group";
 export * from "./toolbar";
 export * from "./tooltip";
+export * from "./virtualizer";

package/src/components/input/input.styles.ts

@@ -6,6 +6,7 @@ export const inputVariants = tv({
   base: "input",
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   variants: {
@@ -13,6 +14,11 @@ export const inputVariants = tv({
       false: "",
       true: "input--full-width",
     },
+    size: {
+      lg: "input--lg",
+      md: "",
+      sm: "input--sm",
+    },
     variant: {
       primary: "input--primary",
       secondary: "input--secondary",

package/src/components/input-group/input-group.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const inputGroupVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -20,6 +21,15 @@ export const inputGroupVariants = tv({
         base: "input-group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "input-group--lg",
+      },
+      md: {},
+      sm: {
+        base: "input-group--sm",
+      },
+    },
     variant: {
       primary: {
         base: "input-group--primary",

package/src/components/list-box/list-box.styles.ts

@@ -5,9 +5,15 @@ import { tv } from "tailwind-variants";
 export const listboxVariants = tv({
   base: "list-box",
   defaultVariants: {
+    size: "md",
     variant: "default",
   },
   variants: {
+    size: {
+      lg: "list-box--lg",
+      md: "",
+      sm: "list-box--sm",
+    },
     variant: {
       danger: "list-box--danger",
       default: "list-box--default",

package/src/components/menu/menu.styles.ts

@@ -4,6 +4,16 @@ import { tv } from "tailwind-variants";
 
 export const menuVariants = tv({
   base: "menu",
+  defaultVariants: {
+    size: "md",
+  },
+  variants: {
+    size: {
+      lg: "menu--lg",
+      md: "",
+      sm: "menu--sm",
+    },
+  },
 });
 
 export type MenuVariants = VariantProps<typeof menuVariants>;

package/src/components/number-field/number-field.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const numberFieldVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -22,6 +23,15 @@ export const numberFieldVariants = tv({
         group: "number-field__group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "number-field--lg",
+      },
+      md: {},
+      sm: {
+        base: "number-field--sm",
+      },
+    },
     variant: {
       primary: {
         base: "number-field--primary",

package/src/components/search-field/search-field.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const searchFieldVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -22,6 +23,15 @@ export const searchFieldVariants = tv({
         group: "search-field__group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "search-field--lg",
+      },
+      md: {},
+      sm: {
+        base: "search-field--sm",
+      },
+    },
     variant: {
       primary: {
         base: "search-field--primary",

package/src/components/segmented-control/index.ts

@@ -0,0 +1 @@
+export * from "./segmented-control.styles";

package/src/components/segmented-control/segmented-control.styles.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const segmentedControlVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    size: "md",
+  },
+  slots: {
+    base: "segmented-control",
+    indicator: "segmented-control__indicator",
+    item: "segmented-control__item",
+    separator: "segmented-control__separator",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "segmented-control--full-width",
+      },
+    },
+    size: {
+      lg: {
+        base: "segmented-control--lg",
+      },
+      md: {
+        base: "segmented-control--md",
+      },
+      sm: {
+        base: "segmented-control--sm",
+      },
+    },
+  },
+});
+
+export type SegmentedControlVariants = VariantProps<typeof segmentedControlVariants>;

package/src/components/select/select.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const selectVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -22,6 +23,17 @@ export const selectVariants = tv({
         trigger: "select__trigger--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "select--lg",
+        popover: "select__popover--lg",
+      },
+      md: {},
+      sm: {
+        base: "select--sm",
+        popover: "select__popover--sm",
+      },
+    },
     variant: {
       primary: {
         base: "select--primary",

package/src/components/sidebar/index.ts

@@ -0,0 +1 @@
+export * from "./sidebar.styles";

package/src/components/sidebar/sidebar.styles.ts

@@ -0,0 +1,94 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+/*
+ * Side and collapse mode are carried as modifier classes rather than left to `[data-side]` /
+ * `[data-collapsible]` selectors in the stylesheet, the same call `splitterVariants` makes: a
+ * selector descending from the shell would reach a second sidebar rendered inside the inset — a
+ * settings pane with a nav of its own — and lay its border down the outer one's edge.
+ *
+ * Only the slots with side- or mode-specific rules branch. `data-collapsed` is deliberately not a
+ * variant: it flips while you watch, which is what a state key is for, and a modifier saying so
+ * would have to be recomputed on every toggle.
+ */
+export const sidebarVariants = tv({
+  defaultVariants: {
+    collapsible: "icon",
+    side: "left",
+  },
+  slots: {
+    base: "sidebar",
+    content: "sidebar__content",
+    footer: "sidebar__footer",
+    group: "sidebar__group",
+    groupLabel: "sidebar__group-label",
+    header: "sidebar__header",
+    inset: "sidebar__inset",
+    item: "sidebar__item",
+    itemIcon: "sidebar__item-icon",
+    itemIndicator: "sidebar__item-indicator",
+    itemLabel: "sidebar__item-label",
+    itemTooltip: "sidebar__item-tooltip",
+    itemTrailing: "sidebar__item-trailing",
+    panel: "sidebar__panel",
+    rail: "sidebar__rail",
+    railTarget: "sidebar__rail-target",
+    separator: "sidebar__separator",
+    subMenu: "sidebar__sub-menu",
+    trigger: "sidebar__trigger",
+  },
+  variants: {
+    collapsible: {
+      icon: {
+        panel: "sidebar__panel--icon",
+      },
+      none: {
+        panel: "sidebar__panel--none",
+      },
+      offcanvas: {
+        panel: "sidebar__panel--offcanvas",
+      },
+    },
+    // Whether the panel is rendering inside a drawer. Resolved by the panel at call time rather
+    // than by the root, because it is the one part that changes shape when the viewport narrows.
+    inDrawer: {
+      true: {
+        panel: "sidebar__panel--drawer",
+      },
+    },
+    // Whether this submenu folds. Resolved by the submenu at call time rather than by the root,
+    // because one sidebar holds items that fold and items that do not.
+    isCollapsible: {
+      true: {
+        subMenu: "sidebar__sub-menu--collapsible",
+      },
+    },
+    // Whether the rail resizes rather than only toggling. Not folded into `collapsible`, because
+    // the two are independent: a sidebar that cannot collapse at all can still be dragged wider.
+    isResizable: {
+      true: {
+        rail: "sidebar__rail--resizable",
+      },
+    },
+    // Whether the row is a child under another item. Resolved by the item at call time, from the
+    // submenu it finds itself inside rather than from a prop a caller has to remember on every row.
+    isSub: {
+      true: {
+        item: "sidebar__item--sub",
+      },
+    },
+    side: {
+      left: {
+        base: "sidebar--left",
+        panel: "sidebar__panel--left",
+      },
+      right: {
+        base: "sidebar--right",
+        panel: "sidebar__panel--right",
+      },
+    },
+  },
+});
+
+export type SidebarVariants = VariantProps<typeof sidebarVariants>;

package/src/components/splitter/index.ts

@@ -0,0 +1 @@
+export * from "./splitter.styles";

package/src/components/splitter/splitter.styles.ts

@@ -0,0 +1,44 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+/*
+ * Orientation is carried as a modifier class rather than left to a `[data-orientation]` selector
+ * in the stylesheet: a splitter nests, and a descendant selector on the root would reach an inner
+ * group's handle as well as its own. Only `base`, `handle` and `handleGrip` branch, because only
+ * they have orientation-specific rules — a modifier on the others would be dead CSS.
+ *
+ * `handleGrip` branches here rather than being sized from its parent's modifier, and that buys two
+ * things at once: the root already resolves these slots against the orientation, so a handle needs
+ * no extra wiring to size its grip, and the grip carries a `--` class of its own — which is what
+ * puts it in front of the Storybook forced-colors sweep. `showGrip` is deliberately *not* a variant:
+ * the grip is only rendered when it is asked for, so a modifier saying so would be dead CSS.
+ */
+export const splitterVariants = tv({
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+  slots: {
+    base: "splitter",
+    handle: "splitter__handle",
+    handleGrip: "splitter__handle-grip",
+    handleTarget: "splitter__handle-target",
+    panel: "splitter__panel",
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        base: "splitter--horizontal",
+        handle: "splitter__handle--horizontal",
+        handleGrip: "splitter__handle-grip--horizontal",
+      },
+      vertical: {
+        base: "splitter--vertical",
+        handle: "splitter__handle--vertical",
+        handleGrip: "splitter__handle-grip--vertical",
+      },
+    },
+  },
+});
+
+export type SplitterVariants = VariantProps<typeof splitterVariants>;

package/src/components/textarea/textarea.styles.ts

@@ -6,6 +6,7 @@ export const textAreaVariants = tv({
   base: "textarea",
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   variants: {
@@ -13,6 +14,11 @@ export const textAreaVariants = tv({
       false: "",
       true: "textarea--full-width",
     },
+    size: {
+      lg: "textarea--lg",
+      md: "",
+      sm: "textarea--sm",
+    },
     variant: {
       primary: "textarea--primary",
       secondary: "textarea--secondary",

package/src/components/virtualizer/index.ts

@@ -0,0 +1 @@
+export * from "./virtualizer.styles";

package/src/components/virtualizer/virtualizer.styles.ts

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+
+/**
+ * The parts a windowed collection draws for itself, whichever collection it is.
+ *
+ * Only the scrollbar so far: a table and a listbox hide the native one and draw this in its place,
+ * so a dragged thumb moves the rows and the scroll offset together.
+ */
+export const virtualizerVariants = tv({
+  slots: {
+    scrollbar: "virtualizer__scrollbar",
+    scrollbarThumb: "virtualizer__scrollbar-thumb",
+    scrollbarTrack: "virtualizer__scrollbar-track",
+  },
+});