@arobo/styles 1.0.1

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

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

package/dist/components/calendar/index.js

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

package/dist/components/calendar.css

@@ -0,0 +1,35 @@
+.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;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover:not([data-disabled="true"]):not([data-selected="true"]) {
+      @apply bg-neutral-200 dark:bg-neutral-700;
+    }
+  }
+
+  /* Selected state */
+  &[data-selected="true"] {
+    @apply bg-accent text-accent-foreground;
+    &[data-today="true"]::after {
+      @apply bg-accent-foreground;
+    }
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply text-fgColor-muted cursor-not-allowed;
+  }
+
+  &[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;
+  }
+}

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

@@ -0,0 +1,71 @@
+import type { VariantProps } from "tailwind-variants";
+declare const cardVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        transparent: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    footer: string;
+    header: string;
+    title: string;
+}, undefined, {
+    variant: {
+        default: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        transparent: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    footer: string;
+    header: string;
+    title: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        transparent: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    footer: string;
+    header: string;
+    title: string;
+}, undefined, unknown, unknown, undefined>>;
+export { cardVariants };
+export type CardVariants = VariantProps<typeof cardVariants>;
+//# sourceMappingURL=card.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4BhB,CAAC;AAEH,OAAO,EAAC,YAAY,EAAC,CAAC;AACtB,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/components/card/card.styles.js

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+
+const cardVariants = tv({
+    defaultVariants: {
+        variant: "default",
+    },
+    slots: {
+        base: "card",
+        content: "card__content",
+        description: "card__description",
+        footer: "card__footer",
+        header: "card__header",
+        title: "card__title",
+    },
+    variants: {
+        variant: {
+            default: {
+                base: "card--default",
+            },
+            secondary: {
+                base: "card--secondary",
+            },
+            tertiary: {
+                base: "card--tertiary",
+            },
+            transparent: {
+                base: "card--transparent",
+            },
+        },
+    },
+});
+
+export { cardVariants };

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

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

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

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

package/dist/components/card/index.js

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

package/dist/components/card.css

@@ -0,0 +1,50 @@
+/* Card component styles */
+
+/* Block */
+.card {
+  @apply relative flex flex-col gap-3 overflow-hidden p-4;
+  @apply rounded-card shadow-surface;
+}
+
+/* Element - header */
+.card__header {
+  @apply flex flex-col;
+}
+
+/* Element - title */
+.card__title {
+  @apply text-sm leading-6 font-medium text-foreground;
+}
+
+/* Element - description */
+.card__description {
+  @apply text-sm leading-5 text-muted;
+}
+
+/* Element - content */
+.card__content {
+  @apply flex flex-1 flex-col gap-1;
+}
+
+/* Element - footer */
+.card__footer {
+  @apply flex flex-row items-center;
+}
+
+/* Modifier - variant */
+
+.card--transparent {
+  @apply border-none bg-transparent shadow-none;
+}
+
+.card--default {
+  @apply bg-surface;
+}
+
+.card--secondary {
+  @apply bg-surface-secondary;
+}
+
+.card--tertiary {
+  @apply bg-surface-tertiary;
+}

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

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const checkboxVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, undefined, {
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxVariants = VariantProps<typeof checkboxVariants>;
+//# sourceMappingURL=checkbox.styles.d.ts.map

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

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

package/dist/components/checkbox/checkbox.styles.js

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+const checkboxVariants = tv({
+    defaultVariants: {
+        variant: "primary",
+    },
+    slots: {
+        base: "checkbox",
+        content: "checkbox__content",
+        control: "checkbox__control",
+        indicator: "checkbox__indicator",
+    },
+    variants: {
+        variant: {
+            primary: {
+                base: "checkbox--primary",
+            },
+            secondary: {
+                base: "checkbox--secondary",
+            },
+        },
+    },
+});
+
+export { checkboxVariants };

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

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

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

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

package/dist/components/checkbox/index.js

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

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

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const checkboxGroupVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "checkbox-group", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "checkbox-group", unknown, unknown, undefined>>;
+export type CheckboxGroupVariants = VariantProps<typeof checkboxGroupVariants>;
+//# sourceMappingURL=checkbox-group.styles.d.ts.map

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

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

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

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+
+const checkboxGroupVariants = tv({
+    base: "checkbox-group",
+    defaultVariants: {
+        variant: "primary",
+        size: "md",
+    },
+    variants: {
+        variant: {
+            primary: "checkbox-group--primary",
+            secondary: "checkbox-group--secondary",
+        },
+        size: {
+            sm: "checkbox-group--sm",
+            md: "checkbox-group--md",
+            lg: "checkbox-group--lg",
+        },
+    },
+});
+
+export { checkboxGroupVariants };

package/dist/components/checkbox-group/index.d.ts

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

package/dist/components/checkbox-group/index.d.ts.map

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

package/dist/components/checkbox-group/index.js

@@ -0,0 +1 @@
+export { checkboxGroupVariants } from './checkbox-group.styles.js';

package/dist/components/checkbox-group.css

@@ -0,0 +1,7 @@
+.checkbox-group {
+  @apply flex flex-col;
+
+  [data-slot="checkbox"] {
+    @apply mt-4;
+  }
+}

package/dist/components/checkbox.css

@@ -0,0 +1,269 @@
+/* ==========================================================================
+   Base checkbox styles
+   ========================================================================== */
+
+.checkbox {
+  @apply flex gap-3 outline-none no-highlight;
+
+  cursor: var(--cursor-interactive);
+
+  /* Align center when there's no description */
+  &:not(:has([data-slot="description"])) {
+    @apply items-center;
+  }
+
+  /* Align start when there's a description */
+  &:has([data-slot="description"]) {
+    @apply items-start;
+  }
+
+  [data-slot="label"] {
+    @apply select-none;
+  }
+
+  [data-slot="description"] {
+    @apply text-wrap select-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Indicator styles */
+  &[data-selected="true"],
+  &[data-indeterminate="true"] {
+    .checkbox__indicator {
+      border-color: var(--accent-foreground);
+      background: var(--accent-hover);
+    }
+  }
+
+  /* Checkmark SVG indicator */
+  [data-slot="checkbox-default-indicator--checkmark"] {
+    @apply size-2.5 stroke-[2.5px] text-accent-foreground;
+
+    /**
+     * Transitions
+     */
+    @apply transition-all duration-200 motion-reduce:transition-none;
+  }
+
+  &[data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"] {
+    transition: stroke-dashoffset 150ms linear 15ms;
+  }
+
+  /* Invalid + Selected: checkmark icon color */
+  &[data-invalid="true"][data-selected="true"]
+    [data-slot="checkbox-default-indicator--checkmark"],
+  &[data-invalid="true"][aria-checked="true"]
+    [data-slot="checkbox-default-indicator--checkmark"],
+  &[aria-invalid="true"][data-selected="true"]
+    [data-slot="checkbox-default-indicator--checkmark"],
+  &[aria-invalid="true"][aria-checked="true"]
+    [data-slot="checkbox-default-indicator--checkmark"] {
+    @apply text-danger-foreground;
+  }
+
+  /* Indeterminate line indicator */
+  &[data-indeterminate="true"] {
+    [data-slot="checkbox-default-indicator--indeterminate"] {
+      @apply size-3;
+    }
+  }
+
+  /* Invalid + Indeterminate: indeterminate icon color */
+  &[data-indeterminate="true"][data-invalid="true"]
+    [data-slot="checkbox-default-indicator--indeterminate"],
+  &[data-indeterminate="true"][aria-invalid="true"]
+    [data-slot="checkbox-default-indicator--indeterminate"] {
+    @apply text-danger-foreground;
+  }
+}
+
+/* ==========================================================================
+   Checkbox control (the square button)
+   ========================================================================== */
+
+.checkbox__control {
+  @apply relative inline-flex size-4 shrink-0 items-center justify-center border border-field-border overflow-hidden rounded-sm bg-field shadow-field outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 200ms var(--ease-out),
+    transform 100ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Add top margin when there's a description */
+  .checkbox:has([data-slot="description"]) & {
+    @apply mt-0.5;
+  }
+
+  /* Background indicator pseudo-element */
+  &::before {
+    @apply pointer-events-none absolute inset-0 z-0 origin-center scale-70 rounded-sm bg-accent opacity-0 content-[''];
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition:
+      scale 100ms var(--ease-linear),
+      opacity 200ms var(--ease-linear),
+      background-color 200ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Interactive states */
+  /* Focus */
+  .checkbox:focus-visible &,
+  .checkbox[data-focus-visible="true"] & {
+    @apply status-focused-field;
+    border-color: var(--color-field-border-focus);
+  }
+
+  /* Hover */
+  .checkbox:hover &,
+  .checkbox[data-hovered="true"] & {
+    @apply border-field-border-hover;
+
+    &::before {
+      @apply bg-accent-hover;
+    }
+  }
+
+  /* Pressed */
+  .checkbox:active &,
+  .checkbox[data-pressed="true"] & {
+  }
+
+  /* Selection states */
+  /* Selected */
+  .checkbox[aria-checked="true"] &,
+  .checkbox[data-selected="true"] & {
+    @apply border-transparent text-accent-foreground;
+
+    &::before {
+      @apply scale-100 opacity-100;
+    }
+  }
+
+  /* Indeterminate */
+  .checkbox[data-indeterminate="true"] & {
+    @apply bg-accent text-accent-foreground border-transparent;
+  }
+
+  /* Indeterminate + Pressed */
+  .checkbox:active[data-indeterminate="true"] &,
+  .checkbox[data-pressed="true"][data-indeterminate="true"] & {
+    @apply bg-accent-hover;
+  }
+
+  /* Validation states */
+  /* Invalid (only when not selected/indeterminate) */
+  .checkbox[data-invalid="true"]:not([aria-checked="true"]):not(
+      [data-selected="true"]
+    ):not([data-indeterminate="true"])
+    &,
+  .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not(
+      [data-selected="true"]
+    ):not([data-indeterminate="true"])
+    & {
+    @apply status-invalid-field;
+  }
+
+  /* Invalid + Selected */
+  .checkbox[data-invalid="true"][aria-checked="true"] &,
+  .checkbox[data-invalid="true"][data-selected="true"] &,
+  .checkbox[aria-invalid="true"][aria-checked="true"] &,
+  .checkbox[aria-invalid="true"][data-selected="true"] & {
+    @apply border-transparent bg-danger text-danger-foreground;
+
+    &::before {
+      @apply scale-100 bg-danger opacity-100;
+    }
+  }
+
+  /* Invalid + Indeterminate */
+  .checkbox[data-indeterminate="true"][aria-invalid="true"] &,
+  .checkbox[data-indeterminate="true"][data-invalid="true"] & {
+    @apply bg-danger text-danger-foreground;
+  }
+}
+
+/* ==========================================================================
+   Checkbox indicator
+   ========================================================================== */
+
+.checkbox__indicator {
+  @apply relative z-10 flex size-3 items-center justify-center;
+}
+
+/* ==========================================================================
+   Checkbox content wrapper
+   ========================================================================== */
+
+.checkbox__content {
+  @apply flex flex-col gap-0;
+}
+
+/* ==========================================================================
+   Disabled modifier
+   ========================================================================== */
+
+.checkbox--disabled {
+  @apply status-disabled;
+}
+
+/* ==========================================================================
+   Variant property definitions
+   ========================================================================== */
+
+.checkbox--primary {
+  /* Default styles */
+}
+
+.checkbox--secondary .checkbox__control {
+  @apply shadow-none;
+  background-color: var(--checkbox-control-bg);
+
+  --checkbox-control-bg: var(--color-default);
+
+  /* Hover state */
+  .checkbox:hover &,
+  .checkbox[data-hovered="true"] & {
+    @apply border-field-border-hover;
+  }
+}
+
+/* Unselected state background for secondary variant */
+.checkbox--secondary:not([aria-checked="true"]):not([data-selected="true"]):not(
+    [data-indeterminate="true"]
+  )
+  .checkbox__control {
+  background-color: var(--checkbox-control-bg);
+}
+
+/* Selected state on secondary variant */
+.checkbox--secondary[aria-checked="true"] .checkbox__control,
+.checkbox--secondary[data-selected="true"] .checkbox__control {
+  &::before {
+    @apply bg-accent;
+  }
+}
+
+/* Indeterminate state on secondary variant */
+.checkbox--secondary[data-indeterminate="true"] .checkbox__control {
+  @apply bg-accent;
+
+  &::before {
+    @apply bg-accent;
+  }
+}

package/dist/components/close-button/close-button.styles.d.ts

@@ -0,0 +1,16 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const closeButtonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, "close-button", {
+    variant: {
+        default: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, "close-button", unknown, unknown, undefined>>;
+export type CloseButtonVariants = VariantProps<typeof closeButtonVariants>;
+//# sourceMappingURL=close-button.styles.d.ts.map

package/dist/components/close-button/close-button.styles.d.ts.map

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

package/dist/components/close-button/close-button.styles.js

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+const closeButtonVariants = tv({
+    base: "close-button",
+    defaultVariants: {
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "close-button--default",
+        },
+    },
+});
+
+export { closeButtonVariants };