@arobo/styles 1.0.1

package/dist/components/label/label.styles.js

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+
+const labelVariants = tv({
+    base: "label",
+    defaultVariants: {
+        isDisabled: false,
+        isInvalid: false,
+        isRequired: false,
+    },
+    variants: {
+        isDisabled: {
+            true: "label--disabled",
+        },
+        isInvalid: {
+            true: "label--invalid",
+        },
+        isRequired: {
+            true: "label--required",
+        },
+    },
+});
+
+export { labelVariants };

package/dist/components/label.css

@@ -0,0 +1,31 @@
+/* Base label styles */
+.label {
+  /* Base styling */
+  @apply text-sm font-medium text-fgColor-default;
+}
+
+/*
+ * Exclude group-level components (RadioGroup, CheckboxGroup) and radio/checkbox items
+ * to ensure asterisks only appear on atomic form field labels and group labels,
+ * not on individual options within those groups
+ */
+.label--required,
+[data-required="true"]:not([role="group"]):not([role="radiogroup"]):not(
+    [role="checkboxgroup"]
+  )
+  > .label,
+[data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"])
+  > .label {
+  @apply after:ml-0.5 after:text-fgColor-danger after:content-['*'];
+}
+
+.label--disabled,
+[data-disabled="true"] .label {
+  @apply status-disabled;
+}
+
+.label--invalid,
+[data-invalid="true"] .label,
+[aria-invalid="true"] .label {
+  @apply text-fgColor-danger;
+}

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

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

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

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

package/dist/components/popover/index.js

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

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

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            dialog?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            dialog?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    dialog: string;
+    heading: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            dialog?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    dialog: string;
+    heading: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    dialog: string;
+    heading: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PopoverVariants = VariantProps<typeof popoverVariants>;
+//# sourceMappingURL=popover.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAO1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/popover/popover.styles.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+const popoverVariants = tv({
+    slots: {
+        base: "popover",
+        dialog: "popover__dialog",
+        heading: "popover__heading",
+        trigger: "popover__trigger",
+    },
+});
+
+export { popoverVariants };

package/dist/components/popover.css

@@ -0,0 +1,91 @@
+/* Popover component styles */
+
+/* Base popover styles */
+.popover {
+  @apply origin-(--trigger-anchor-point) rounded-xl bg-overlay p-0 text-sm will-change-[opacity,transform];
+  @apply border border-borderColor-default;
+  box-shadow: var(--shadow-overlay);
+
+  /* Entering animations */
+  &[data-entering="true"] {
+    @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-90;
+
+    /* Placement-specific translations */
+    &[data-placement="top"] {
+      @apply slide-in-from-bottom-1;
+    }
+
+    &[data-placement="bottom"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement="left"] {
+      @apply slide-in-from-right-1;
+    }
+
+    &[data-placement="right"] {
+      @apply slide-in-from-left-1;
+    }
+  }
+
+  /* Exiting animations */
+  &[data-exiting="true"] {
+    @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out;
+  }
+
+  /* Arrow styling */
+  & [data-slot="popover-overlay-arrow"] {
+    fill: var(--overlay);
+    @apply stroke-1 stroke-borderColor-default;
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="popover-overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="popover-overlay-arrow"] {
+    rotate: 90deg;
+  }
+}
+
+/* Popover dialog */
+.popover__dialog {
+  @apply p-4 outline-none;
+}
+
+/* Popover heading */
+.popover__heading {
+  @apply font-medium;
+}
+
+/* Popover trigger */
+.popover__trigger {
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 150ms var(--ease-smooth),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}

package/dist/components/range-calendar/index.d.ts

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

package/dist/components/range-calendar/index.d.ts.map

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

package/dist/components/range-calendar/index.js

@@ -0,0 +1 @@
+export { rangeCalendarVariants } from './range-calendar.styles.js';

package/dist/components/range-calendar/range-calendar.styles.d.ts

@@ -0,0 +1,43 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const rangeCalendarVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    cell: string;
+    grid: string;
+}, "range-calendar", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    cell: string;
+    grid: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    cell: string;
+    grid: string;
+}, "range-calendar", unknown, unknown, undefined>>;
+export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>;
+//# sourceMappingURL=range-calendar.styles.d.ts.map

package/dist/components/range-calendar/range-calendar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/range-calendar/range-calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAqBhC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/components/range-calendar/range-calendar.styles.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+const rangeCalendarVariants = tv({
+    base: "range-calendar",
+    slots: {
+        cell: "range-calendar__cell",
+        grid: "range-calendar__grid",
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "md",
+    },
+    variants: {
+        variant: {
+            primary: "range-calendar--primary",
+            secondary: "range-calendar--secondary",
+        },
+        size: {
+            sm: "range-calendar--sm",
+            md: "range-calendar--md",
+            lg: "range-calendar--lg",
+        },
+    },
+});
+
+export { rangeCalendarVariants };

package/dist/components/range-calendar.css

@@ -0,0 +1,83 @@
+.range-calendar {
+  @apply w-[calc(9*var(--spacing)*7)] max-w-full @container;
+}
+
+.range-calendar__grid {
+  @apply [&_td]:px-0 [&_td]:py-px border-spacing-0;
+}
+
+.range-calendar__cell {
+  @apply w-[calc(100cqw/7)] aspect-square text-sm cursor-default;
+  @apply rounded-md flex items-center justify-center forced-color-adjust-none no-highlight;
+
+  /* Today cell */
+  &[data-today="true"] {
+    @apply relative;
+  }
+
+  &[data-today="true"]::after {
+    @apply absolute bg-accent rounded-full -translate-x-1/2 left-1/2 bottom-1;
+    content: "";
+    width: 3px;
+    height: 3px;
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover:not([data-disabled="true"]):not([data-selected="true"]) {
+      @apply bg-neutral-200 dark:bg-neutral-700;
+    }
+  }
+
+  /* Selection start & end */
+  &[data-selected="true"][data-selection-start="true"],
+  &[data-selected="true"][data-selection-end="true"] {
+    @apply bg-accent text-accent-foreground;
+    &[data-today="true"]::after {
+      @apply bg-accent-foreground;
+    }
+  }
+
+  &[data-selected="true"][data-selection-start="true"][data-selection-end="true"] {
+    @apply rounded-md;
+  }
+
+  &[data-selected="true"][data-selection-start="true"] {
+    @apply rounded-l-md rounded-none;
+  }
+
+  &[data-selected="true"][data-selection-end="true"] {
+    @apply rounded-r-md rounded-none;
+  }
+
+  /* Selected state */
+  &[data-selected="true"]:not([data-selection-start="true"]):not(
+      [data-selection-end="true"]
+    ) {
+    @apply rounded-none;
+    background-color: color-mix(
+      in oklab,
+      var(--color-accent) 10%,
+      var(--color-white) 90%
+    );
+    &[data-today="true"]::after {
+      @apply bg-accent;
+    }
+  }
+
+  &[data-selected="true"][data-selection-end="true"] {
+    @apply bg-accent text-accent-foreground;
+    &[data-today="true"]::after {
+      @apply bg-accent-foreground;
+    }
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply text-fgColor-disabled cursor-not-allowed;
+  }
+
+  [data-slot="cell-content"] {
+    @apply w-full h-full flex items-center justify-center;
+  }
+}

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

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

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

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

package/dist/components/surface/index.js

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

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

@@ -0,0 +1,37 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const surfaceVariants: import("tailwind-variants").TVReturnType<{
+    effect: {
+        none: string;
+        liquid: string;
+    };
+    variant: {
+        default: string;
+        secondary: string;
+        tertiary: string;
+        transparent: string;
+    };
+}, undefined, "surface", {
+    effect: {
+        none: string;
+        liquid: string;
+    };
+    variant: {
+        default: string;
+        secondary: string;
+        tertiary: string;
+        transparent: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    effect: {
+        none: string;
+        liquid: string;
+    };
+    variant: {
+        default: string;
+        secondary: string;
+        tertiary: string;
+        transparent: string;
+    };
+}, undefined, "surface", unknown, unknown, undefined>>;
+export type SurfaceVariants = VariantProps<typeof surfaceVariants>;
+//# sourceMappingURL=surface.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface.styles.d.ts","sourceRoot":"","sources":["../../../src/components/surface/surface.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sDA8B1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/surface/surface.styles.js

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+
+const surfaceVariants = tv({
+    base: "surface",
+    defaultVariants: {
+        variant: "default",
+        effect: "none",
+    },
+    variants: {
+        effect: {
+            none: "",
+            liquid: "surface--liquid",
+        },
+        variant: {
+            default: "surface--default",
+            secondary: "surface--secondary",
+            tertiary: "surface--tertiary",
+            transparent: "surface--transparent",
+        },
+    },
+    compoundVariants: [
+        {
+            effect: "liquid",
+            variant: "transparent",
+            class: "surface--liquid-transparent",
+        },
+        {
+            effect: "liquid",
+            variant: "default",
+            class: "surface--liquid-default",
+        },
+    ],
+});
+
+export { surfaceVariants };

package/dist/components/surface.css

@@ -0,0 +1,36 @@
+/* Surface component styles */
+
+/* Block */
+.surface {
+  @apply relative;
+}
+
+/* Modifier - effect */
+.surface--liquid {
+  @apply backdrop-blur-surface-liquid;
+}
+
+/* Modifier - variant */
+.surface--transparent {
+  @apply bg-transparent;
+}
+
+.surface--default {
+  @apply bg-surface;
+}
+
+.surface--secondary {
+  @apply bg-surface-secondary;
+}
+
+.surface--tertiary {
+  @apply bg-surface-tertiary;
+}
+
+.surface--liquid-default {
+  @apply bg-white/60!;
+}
+
+.surface--liquid-transparent {
+  @apply border border-white/5!;
+}

package/dist/components/text-field/index.d.ts

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

package/dist/components/text-field/index.d.ts.map

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

package/dist/components/text-field/index.js

@@ -0,0 +1 @@
+export { textFieldVariants } from './text-field.styles.js';

package/dist/components/text-field/text-field.styles.d.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const textFieldVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+}, undefined, "text-field", {
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+}, undefined, "text-field", unknown, unknown, undefined>>;
+export type TextFieldVariants = VariantProps<typeof textFieldVariants>;
+//# sourceMappingURL=text-field.styles.d.ts.map

package/dist/components/text-field/text-field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.styles.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;yDAW5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/text-field/text-field.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const textFieldVariants = tv({
+    base: "text-field",
+    defaultVariants: {
+        fullWidth: false,
+    },
+    variants: {
+        fullWidth: {
+            false: "",
+            true: "text-field--full-width",
+        },
+    },
+});
+
+export { textFieldVariants };

package/dist/components/text-field.css

@@ -0,0 +1,26 @@
+/* Text field styles */
+.text-field {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="description"] {
+    @apply px-1;
+  }
+}
+
+/* Full width modifier */
+.text-field--full-width {
+  @apply w-full;
+
+  /* Automatically make Input full width when TextField is full width */
+  [data-slot="input"],
+  [data-slot="textarea"] {
+    @apply w-full;
+  }
+}

package/dist/index.css

@@ -0,0 +1,17 @@
+@layer theme, base, components, utilities;
+
+/* Base layer - Tailwind CSS v4 */
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Base styles */
+@import "./base/base.css" layer(base);
+
+/* Base component structures */
+@import "./components/index.css" layer(components);
+
+/* Default theme (variables + component customization) */
+@import "./themes/default/index.css" layer(theme);
+
+/* Utilities */
+@import "./utilities/index.css";

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { tv, cn, type VariantProps } from "tailwind-variants";
+export * from "./components";
+export * from "./utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,24 @@
+export { cn, tv } from 'tailwind-variants';
+export { buttonVariants } from './components/button/button.styles.js';
+export { buttonGroupVariants } from './components/button-group/button-group.styles.js';
+export { calendarVariants } from './components/calendar/calendar.styles.js';
+export { cardVariants } from './components/card/card.styles.js';
+export { checkboxVariants } from './components/checkbox/checkbox.styles.js';
+export { checkboxGroupVariants } from './components/checkbox-group/checkbox-group.styles.js';
+export { closeButtonVariants } from './components/close-button/close-button.styles.js';
+export { comboboxVariants } from './components/combobox/combobox.styles.js';
+export { dateFieldVariants } from './components/date-field/date-field.styles.js';
+export { dateInputGroupVariants } from './components/date-input-group/date-input-group.styles.js';
+export { datePickerVariants } from './components/date-picker/date-picker.styles.js';
+export { dateRangePickerVariants } from './components/date-range-picker/date-range-picker.styles.js';
+export { descriptionVariants } from './components/description/description.styles.js';
+export { errorMessageVariants } from './components/error-message/error-message.styles.js';
+export { fieldErrorVariants } from './components/field-error/field-error.styles.js';
+export { fieldBorderStyles, fieldGroupVariants } from './components/field-group/field-group.styles.js';
+export { inputVariants } from './components/input/input.styles.js';
+export { labelVariants } from './components/label/label.styles.js';
+export { popoverVariants } from './components/popover/popover.styles.js';
+export { rangeCalendarVariants } from './components/range-calendar/range-calendar.styles.js';
+export { surfaceVariants } from './components/surface/surface.styles.js';
+export { textFieldVariants } from './components/text-field/text-field.styles.js';
+export { focusRing } from './utils/state.js';

package/dist/themes/default/index.css

@@ -0,0 +1,4 @@
+/* Declares the theme variables - @see https://tailwindcss.com/docs/theme */
+@import "../shared/theme.css";
+
+@import "./variables.css" layer(theme);