@masaraxui/styles 1.0.0

package/dist/components/switch.css

@@ -0,0 +1,194 @@
+/* Switch base styles */
+.switch {
+  @apply inline-flex items-center gap-3 no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Default tokens for switch control states */
+  --switch-control-bg: var(--color-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(--color-accent);
+  --switch-control-bg-checked-hover: var(--color-accent-hover);
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    .switch__thumb {
+      @apply bg-default-foreground/20;
+    }
+  }
+
+  /* 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-full;
+  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[data-focus-visible="true"] & {
+    @apply status-focused;
+  }
+
+  /* Hover states */
+  .switch:hover &,
+  .switch[data-hovered="true"] & {
+    background-color: var(--switch-control-bg-hover);
+  }
+
+  /* Pressed states */
+  .switch:active &,
+  .switch[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"] & {
+    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"] & {
+    background-color: var(--switch-control-bg-checked-hover);
+  }
+}
+
+/* Size-specific control dimensions */
+.switch--sm .switch__control {
+  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-full 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 {
+  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 {
+  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 content */
+.switch__content {
+  @apply flex flex-col gap-0;
+}

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 @@
+export { tableVariants } from './table.styles.js';

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

@@ -0,0 +1,75 @@
+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;
+}, 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;
+}, 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;
+}, undefined, unknown, unknown, undefined>>;
+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,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA6BxB,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,34 @@
+import { tv } from 'tailwind-variants';
+
+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",
+    },
+    variants: {
+        variant: {
+            primary: {
+                base: "table-root--primary",
+            },
+            secondary: {
+                base: "table-root--secondary",
+            },
+        },
+    },
+});
+
+export { tableVariants };

package/dist/components/table.css

@@ -0,0 +1,332 @@
+/* ==========================================================================
+   Table — Data display component for structured tabular data.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Table Root — Outer container for table + optional footer.
+   Primary variant: gray background with the table body as a white card inside.
+   -------------------------------------------------------------------------- */
+.table-root {
+  @apply relative grid w-full overflow-clip;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* --------------------------------------------------------------------------
+   Scroll Container — Allows the table to scroll horizontally while the
+   wrapper and footer remain at full width. The parent grid with
+   minmax(0, 1fr) creates a hard width boundary that table layout
+   cannot push beyond.
+   -------------------------------------------------------------------------- */
+.table__scroll-container {
+  @apply overflow-x-auto;
+  /* Custom scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0% 0 0 / 0.15) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: oklch(0% 0 0 / 0.15);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: oklch(0% 0 0 / 0.25);
+  }
+
+  /* Dark mode scrollbar */
+  :is([data-theme="dark"], .dark) & {
+    scrollbar-color: oklch(100% 0 0 / 0.15) transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background: oklch(100% 0 0 / 0.15);
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: oklch(100% 0 0 / 0.25);
+    }
+  }
+}
+
+.table-root--primary {
+  @apply bg-surface-secondary px-1 pb-1;
+  border-radius: calc(var(--radius) * 2.5);
+}
+
+.table-root--secondary {
+  /* No background, padding, or rounding on the root */
+}
+
+/* Secondary: header is a standalone rounded card.
+   Background is on cells (not <thead>) because Firefox does not support */
+.table-root--secondary .table__header {
+  @apply border-b-0 bg-transparent;
+}
+
+.table-root--secondary .table__column {
+  @apply bg-surface-secondary;
+}
+
+.table-root--secondary .table__column:first-child {
+  @apply rounded-tl-2xl rounded-bl-2xl;
+}
+
+.table-root--secondary .table__column:last-child {
+  @apply rounded-tr-2xl rounded-br-2xl;
+}
+
+/* Secondary: body has no shadow or rounded corners */
+.table-root--secondary .table__body {
+  @apply shadow-none;
+
+  /* Non-virtualized */
+  & tr:first-child td:first-child,
+  & tr:first-child td:last-child,
+  & tr:last-child td:first-child,
+  & tr:last-child td:last-child {
+    @apply rounded-none;
+  }
+
+  /* Virtualized: undo the rounding applied by .table__body:not(tbody) */
+  &:not(tbody) {
+    @apply overflow-visible rounded-none;
+  }
+}
+
+/* Secondary: rows are transparent and keep bottom border on every row */
+.table-root--secondary .table__row {
+  .table__cell {
+    @apply border-b border-separator-tertiary/50 bg-transparent;
+  }
+
+  @media (hover: hover) {
+    &:hover .table__cell,
+    &[data-hovered="true"] .table__cell {
+      @apply bg-default/50;
+    }
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Content (<table> element) — the white card inside the root
+   -------------------------------------------------------------------------- */
+.table__content {
+  @apply w-full border-separate border-spacing-0 text-sm;
+}
+
+/* Primary variant: table gets the white surface card look */
+.table-root--primary .table__content {
+  @apply overflow-clip;
+}
+
+/* --------------------------------------------------------------------------
+   Table Header (<thead>)
+   -------------------------------------------------------------------------- */
+.table__header {
+  @apply border-b border-separator/50 bg-surface-secondary;
+}
+
+/* --------------------------------------------------------------------------
+   Table Column (<th>)
+   -------------------------------------------------------------------------- */
+.table__column {
+  @apply relative px-4 py-2.5 text-left text-xs font-medium text-muted;
+
+  /* Separator between columns — a short vertical line on the right edge */
+  &::after {
+    content: "";
+    @apply pointer-events-none absolute top-1/2 right-0 h-4 w-px -translate-y-1/2 rounded-sm bg-separator;
+  }
+
+  &:last-child:not(:only-child)::after {
+    content: none;
+  }
+
+  /* Sortable columns */
+  &[data-allows-sorting="true"] {
+    cursor: var(--cursor-interactive);
+  }
+
+  @media (hover: hover) {
+    &[data-allows-sorting="true"]:hover,
+    &[data-allows-sorting="true"][data-hovered="true"] {
+      @apply text-foreground;
+    }
+  }
+
+  /* Focus visible — inset shadow for consistent table focus styling */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply rounded-lg outline-none;
+    box-shadow: inset 0 0 0 2px var(--color-focus);
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Body (<tbody>)
+   -------------------------------------------------------------------------- */
+.table__body {
+  /* Non-virtualized: round corners via first/last cells
+     (border-radius on <tbody> itself has no effect) */
+  & tr:first-child td:first-child {
+    @apply rounded-tl-2xl;
+  }
+  & tr:first-child td:last-child {
+    @apply rounded-tr-2xl;
+  }
+  & tr:last-child td:first-child {
+    @apply rounded-bl-2xl;
+  }
+  & tr:last-child td:last-child {
+    @apply rounded-br-2xl;
+  }
+
+  /* Virtualized: elements are divs, not tr/td. VirtualizerItem wrappers
+     break :first-child/:last-child on rows and cells, so round the body
+     itself and clip overflow instead. */
+  &:not(tbody) {
+    @apply relative h-full overflow-clip rounded-2xl;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Row (<tr>)
+   -------------------------------------------------------------------------- */
+.table__row {
+  @apply relative h-full;
+
+  /* Bottom separator */
+  @apply border-b border-separator/50;
+
+  /* Last row in body has no bottom border */
+  &:last-child {
+    @apply border-b-0;
+  }
+
+  /* Hover state — applied to cells so Firefox clips bg to border-radius */
+  @media (hover: hover) {
+    &:hover .table__cell,
+    &[data-hovered="true"] .table__cell {
+      @apply bg-surface/40;
+    }
+  }
+
+  /* Selected state */
+  &[data-selected="true"] .table__cell {
+    @apply bg-surface/10;
+  }
+
+  /* Disabled state */
+  &[aria-disabled="true"],
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Focus visible — use outline instead of ring for better table row rendering */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+    box-shadow: inset 0 0 0 2px var(--color-focus);
+  }
+
+  /* Dragging state */
+  &[data-dragging="true"] {
+    @apply opacity-50;
+  }
+
+  /* Drop target state */
+  &[data-drop-target="true"] .table__cell {
+    @apply bg-accent-soft;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Cell (<td>)
+   -------------------------------------------------------------------------- */
+.table__cell {
+  @apply h-full bg-surface px-4 py-3 align-middle text-sm text-foreground;
+
+  @apply border-b border-separator-tertiary/50;
+
+  /* Focus visible — inset shadow so focus stays within the cell boundaries */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply rounded-lg outline-none;
+    box-shadow: inset 0 0 0 2px var(--color-focus);
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Footer (div outside <table>, sits on gray bg)
+   -------------------------------------------------------------------------- */
+.table__footer {
+  @apply flex items-center px-4 py-2.5;
+}
+
+/* --------------------------------------------------------------------------
+   Resizable Container — wraps table to enable column resizing via React Aria.
+   -------------------------------------------------------------------------- */
+.table__resizable-container {
+  @apply relative overflow-auto;
+}
+
+/* --------------------------------------------------------------------------
+   Column Resizer — drag handle between resizable columns.
+   Replaces the ::after separator when present.
+   -------------------------------------------------------------------------- */
+.table__column-resizer {
+  /* Match the ::after separator: absolute, right edge, short vertical line */
+  @apply absolute top-1/2 right-0 h-4 w-px -translate-y-1/2 rounded-sm bg-separator;
+  /* Make it interactive — wider hit area with transparent padding */
+  @apply box-content translate-x-1/2 cursor-col-resize touch-none px-2;
+  /* Reset appearance */
+  @apply border-none bg-clip-content outline-none;
+
+  &[data-hovered="true"],
+  &:hover {
+    @apply h-full w-0.5 bg-accent;
+  }
+
+  &[data-resizing="true"] {
+    @apply h-full w-0.5 bg-accent;
+  }
+
+  &[data-focus-visible="true"],
+  &:focus-visible {
+    @apply h-full w-0.5 bg-focus;
+  }
+}
+
+/* Hide the ::after separator when a resizer is present in the column */
+.table__column:has(.table__column-resizer)::after {
+  content: none;
+}
+
+/* --------------------------------------------------------------------------
+   Load More Item — sentinel row for infinite scrolling.
+   Non-virtualized: <tr> with <td colSpan=N> inside.
+   Virtualized: <div> with <div role="rowheader"> inside.
+   -------------------------------------------------------------------------- */
+.table__load-more {
+  & td,
+  & [role="rowheader"] {
+    @apply py-3 text-center;
+    & > * {
+      @apply mx-auto;
+    }
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Load More Content — styled container for the loading indicator inside
+   the load-more sentinel row.
+   -------------------------------------------------------------------------- */
+.table__load-more-content {
+  @apply flex items-center justify-center gap-2 py-2;
+}

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

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

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

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

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { tabsVariants } from './tabs.styles.js';