@ropav/styles 0.3.0

package/dist/components/switch-group/switch-group.styles.d.ts

@@ -0,0 +1,40 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const switchGroupVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    items: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    items: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    items: string;
+}>>;
+export type SwitchGroupVariants = VariantProps<typeof switchGroupVariants>;
+//# sourceMappingURL=switch-group.styles.d.ts.map

package/dist/components/switch-group/switch-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/switch-group/switch-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;QAU1B,UAAU;YACR,IAAI;;QAEN,QAAQ;YACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/switch-group/switch-group.styles.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+//#region src/components/switch-group/switch-group.styles.ts
+const switchGroupVariants = tv({
+	defaultVariants: { orientation: "vertical" },
+	slots: {
+		base: "switch-group",
+		items: "switch-group__items"
+	},
+	variants: { orientation: {
+		horizontal: { base: "switch-group--horizontal" },
+		vertical: { base: "switch-group--vertical" }
+	} }
+});
+//#endregion
+export { switchGroupVariants };

package/dist/components/switch-group.css

@@ -0,0 +1,17 @@
+/* Switch Group styles */
+.switch-group {
+  @apply flex flex-col gap-6;
+}
+
+.switch-group__items {
+  @apply flex gap-4;
+}
+
+/* Orientation modifiers */
+.switch-group--horizontal .switch-group__items {
+  @apply flex-row;
+}
+
+.switch-group--vertical .switch-group__items {
+  @apply flex-col;
+}

package/dist/components/switch.css

@@ -0,0 +1,242 @@
+/* Switch base styles */
+.switch {
+  @apply flex flex-col items-start gap-1 no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Default tokens for switch control states */
+  --switch-control-bg: var(--default);
+  --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%);
+  --switch-control-bg-pressed: var(--switch-control-bg-hover);
+  --switch-control-bg-checked: var(--accent);
+  --switch-control-bg-checked-hover: var(--accent-hover);
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="description"],
+    [data-slot="field-error"] {
+      @apply status-disabled;
+    }
+
+    .switch__thumb {
+      @apply bg-default-foreground/20;
+    }
+  }
+
+  /* Field-level help text below the control + label row */
+  & > [data-slot="description"] {
+    @apply w-full min-w-0 ps-[calc(2.5rem+0.75rem)];
+  }
+
+  & > [data-slot="field-error"] {
+    @apply w-full min-w-0 ps-[calc(2.5rem+0.75rem)] text-xs text-muted;
+  }
+
+  &.switch--sm > [data-slot="description"] {
+    @apply ps-[calc(2rem+0.75rem)];
+  }
+
+  &.switch--sm > [data-slot="field-error"] {
+    @apply ps-[calc(2rem+0.75rem)];
+  }
+
+  &.switch--lg > [data-slot="description"] {
+    @apply ps-[calc(3rem+0.75rem)];
+  }
+
+  &.switch--lg > [data-slot="field-error"] {
+    @apply ps-[calc(3rem+0.75rem)];
+  }
+
+  /* Disabled + Selected state */
+  &:disabled[aria-checked="true"],
+  &:disabled[data-selected="true"],
+  &[data-disabled="true"][aria-checked="true"],
+  &[data-disabled="true"][data-selected="true"],
+  &[aria-disabled="true"][aria-checked="true"],
+  &[aria-disabled="true"][data-selected="true"] {
+    .switch__thumb {
+      opacity: 0.4;
+    }
+  }
+}
+
+/* Size variants - default is medium */
+.switch--sm {
+  /* Small size modifier */
+}
+
+.switch--md {
+  /* Medium size - no styles as this is the default */
+}
+
+.switch--lg {
+  /* Large size modifier */
+}
+
+/* Switch control (track) */
+.switch__control {
+  /* Default size (medium) */
+  @apply relative flex shrink-0 items-center overflow-hidden rounded-xl;
+  height: 1.25rem; /* 20px on desktop (14px base), 20px on mobile (16px base) - scales with font-size */
+  width: 2.5rem; /* 35px on desktop, 40px on mobile - scales with font-size */
+
+  background-color: var(--switch-control-bg);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 250ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Focus states */
+  .switch:focus-visible &,
+  .switch:has([data-slot="switch-content"][data-focus-visible="true"]) &,
+  .switch [data-slot="switch-content"][data-focus-visible="true"] & {
+    @apply status-focused;
+  }
+
+  /* Hover states */
+  .switch:hover &,
+  .switch:has([data-slot="switch-content"][data-hovered="true"]) &,
+  .switch [data-slot="switch-content"][data-hovered="true"] & {
+    background-color: var(--switch-control-bg-hover);
+  }
+
+  /* Pressed states */
+  .switch:active &,
+  .switch:has([data-slot="switch-content"][data-pressed="true"]) &,
+  .switch [data-slot="switch-content"][data-pressed="true"] & {
+    background-color: var(--switch-control-bg-pressed);
+    @apply motion-reduce:transform-none;
+  }
+
+  /* Checked states */
+  .switch[aria-checked="true"] &,
+  .switch[data-selected="true"] & {
+    background-color: var(--switch-control-bg-checked);
+  }
+
+  /* Checked + Hover states */
+  .switch[aria-checked="true"]:hover &,
+  .switch[data-selected="true"]:hover &,
+  .switch[aria-checked="true"][data-hovered="true"] &,
+  .switch[data-selected="true"][data-hovered="true"] &,
+  .switch:has([data-slot="switch-content"][data-hovered="true"])[data-selected="true"] & {
+    background-color: var(--switch-control-bg-checked-hover);
+  }
+
+  /* Checked + Pressed states */
+  .switch[aria-checked="true"]:active &,
+  .switch[data-selected="true"]:active &,
+  .switch[aria-checked="true"][data-pressed="true"] &,
+  .switch[data-selected="true"][data-pressed="true"] &,
+  .switch:has([data-slot="switch-content"][data-pressed="true"])[data-selected="true"] & {
+    background-color: var(--switch-control-bg-checked-hover);
+  }
+}
+
+/* Switch content — the clickable label (control + label text) */
+.switch__content {
+  @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight;
+}
+
+/* Size-specific control dimensions */
+.switch--sm .switch__control {
+  @apply rounded-lg;
+  height: 1rem; /* ~14px on desktop, ~16px on mobile */
+  width: 2rem; /* ~32px on desktop, ~36px on mobile */
+}
+
+.switch--md .switch__control {
+  /* No styles as this is the default size */
+}
+
+.switch--lg .switch__control {
+  height: 1.5rem; /* ~21px on desktop, ~24px on mobile */
+  width: 3rem; /* ~48px on desktop, ~56px on mobile */
+}
+
+/* Switch thumb */
+.switch__thumb {
+  /* Default size (medium) with margin-based positioning */
+  @apply ms-0.5 flex origin-center rounded-lg bg-white text-black shadow-field;
+  height: 1rem; /* ~14px on desktop, ~16px on mobile */
+  width: 1.375rem; /* ~19px on desktop, ~22px on mobile */
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    margin 300ms var(--ease-out-fluid),
+    background-color 200ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Selected/checked state - use margin instead of translate */
+  .switch[aria-checked="true"] &,
+  .switch[data-selected="true"] & {
+    @apply ms-[calc(100%-1.5rem)] bg-accent-foreground text-accent;
+    box-shadow:
+      0px 0px 5px 0px rgb(0 0 0 / 0.02),
+      0px 2px 10px 0px rgb(0 0 0 / 0.06),
+      0px 0px 1px 0px rgb(0 0 0 / 0.3);
+  }
+
+  .switch:active &,
+  .switch[data-pressed="true"] & {
+  }
+}
+
+/* Size-specific thumb dimensions */
+.switch--sm .switch__thumb {
+  @apply rounded-md;
+  height: 0.75rem; /* ~10.5px on desktop, ~12px on mobile */
+  width: 1.03125rem; /* ~14.4px on desktop, ~16.5px on mobile - maintains 1.375:1 ratio */
+
+  /* Small selected state positioning */
+  .switch[aria-checked="true"] &,
+  .switch[data-selected="true"] & {
+    @apply ms-[calc(100%-1.15625rem)];
+  }
+}
+
+.switch--lg .switch__thumb {
+  @apply rounded-xl;
+  height: 1.25rem; /* ~17.5px on desktop, ~20px on mobile */
+  width: 1.71875rem; /* ~24px on desktop, ~27.5px on mobile - maintains 1.375:1 ratio */
+
+  /* Large selected state positioning */
+  .switch[aria-checked="true"] &,
+  .switch[data-selected="true"] & {
+    @apply ms-[calc(100%-1.84375rem)];
+  }
+}
+
+/* Switch thumb content container */
+.switch__thumb > * {
+  @apply flex size-full items-center justify-center;
+}
+
+/* Switch label */
+.switch__label {
+  @apply text-base font-medium text-foreground;
+}
+
+.switch [data-slot="label"] {
+  @apply select-none;
+}
+
+.switch__content [data-slot="label"] {
+  cursor: var(--cursor-interactive);
+}
+
+.switch [data-slot="description"] {
+  @apply cursor-default select-none;
+}

package/dist/components/table/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./table.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/table/index.js

@@ -0,0 +1,2 @@
+import { tableVariants } from "./table.styles.js";
+export { tableVariants };

package/dist/components/table/table.styles.d.ts

@@ -0,0 +1,81 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const tableVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    body: string;
+    cell: string;
+    column: string;
+    columnResizer: string;
+    content: string;
+    footer: string;
+    header: string;
+    loadMore: string;
+    loadMoreContent: string;
+    resizableContainer: string;
+    row: string;
+    scrollContainer: string;
+    sortableColumnHeader: string;
+    sortableColumnIndicator: string;
+}, undefined, {
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    body: string;
+    cell: string;
+    column: string;
+    columnResizer: string;
+    content: string;
+    footer: string;
+    header: string;
+    loadMore: string;
+    loadMoreContent: string;
+    resizableContainer: string;
+    row: string;
+    scrollContainer: string;
+    sortableColumnHeader: string;
+    sortableColumnIndicator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    body: string;
+    cell: string;
+    column: string;
+    columnResizer: string;
+    content: string;
+    footer: string;
+    header: string;
+    loadMore: string;
+    loadMoreContent: string;
+    resizableContainer: string;
+    row: string;
+    scrollContainer: string;
+    sortableColumnHeader: string;
+    sortableColumnIndicator: string;
+}>>;
+type TableRenderPropsKeys = "isHovered" | "isFocused" | "isFocusVisible" | "isSelected" | "isDisabled" | "isDragging" | "isDropTarget" | "state";
+export type TableVariants = Omit<VariantProps<typeof tableVariants>, TableRenderPropsKeys>;
+export {};
+//# sourceMappingURL=table.styles.d.ts.map

package/dist/components/table/table.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;QAuBpB,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAGH,KAAK,oBAAoB,GACrB,WAAW,GACX,WAAW,GACX,gBAAgB,GAChB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,EAAE,oBAAoB,CAAC,CAAC"}

package/dist/components/table/table.styles.js

@@ -0,0 +1,28 @@
+import { tv } from "tailwind-variants";
+//#region src/components/table/table.styles.ts
+const tableVariants = tv({
+	defaultVariants: { variant: "primary" },
+	slots: {
+		base: "table-root",
+		body: "table__body",
+		cell: "table__cell",
+		column: "table__column",
+		columnResizer: "table__column-resizer",
+		content: "table__content",
+		footer: "table__footer",
+		header: "table__header",
+		loadMore: "table__load-more",
+		loadMoreContent: "table__load-more-content",
+		resizableContainer: "table__resizable-container",
+		row: "table__row",
+		scrollContainer: "table__scroll-container",
+		sortableColumnHeader: "table__sortable-column-header",
+		sortableColumnIndicator: "table__sortable-column-indicator"
+	},
+	variants: { variant: {
+		primary: { base: "table-root--primary" },
+		secondary: { base: "table-root--secondary" }
+	} }
+});
+//#endregion
+export { tableVariants };