@arobo/styles 1.0.1

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

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

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

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

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

@@ -0,0 +1 @@
+export { closeButtonVariants } from './close-button.styles.js';

package/dist/components/close-button.css

@@ -0,0 +1,65 @@
+/* Close Button component styles */
+
+/* Base close button styles */
+.close-button {
+  @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 will-change-transform select-none no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out-quart),
+    color 150ms var(--ease-out),
+    background-color 100ms var(--ease-out),
+    box-shadow 150ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Pending state */
+  &[data-pending="true"] {
+    @apply status-pending;
+  }
+
+  /* SVG icon styling*/
+  & svg {
+    @apply pointer-events-none;
+    @apply size-4 shrink-0 self-center;
+    @apply -mx-0.5 my-0.5;
+  }
+}
+
+/* Variants */
+.close-button--default {
+  @apply bg-default text-muted;
+
+  &:active,
+  &[data-pressed="true"] {
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default-hover;
+    }
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.93);
+  }
+}

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

@@ -0,0 +1,43 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const comboboxVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            inputGroup: string;
+        };
+    };
+}, {
+    base: string;
+    inputGroup: string;
+    popover: string;
+    trigger: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            inputGroup: string;
+        };
+    };
+}, {
+    base: string;
+    inputGroup: string;
+    popover: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            inputGroup: string;
+        };
+    };
+}, {
+    base: string;
+    inputGroup: string;
+    popover: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ComboBoxVariants = VariantProps<typeof comboboxVariants>;
+//# sourceMappingURL=combobox.styles.d.ts.map

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

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

package/dist/components/combobox/combobox.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+const comboboxVariants = tv({
+    defaultVariants: {
+        fullWidth: false,
+    },
+    slots: {
+        base: "combobox",
+        inputGroup: "combobox__input-group",
+        popover: "combobox__popover",
+        trigger: "combobox__trigger",
+    },
+    variants: {
+        fullWidth: {
+            false: {},
+            true: {
+                base: "combobox--full-width",
+                inputGroup: "combobox__input-group--full-width",
+            },
+        },
+    },
+});
+
+export { comboboxVariants };

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

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

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

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

package/dist/components/combobox/index.js

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

package/dist/components/combobox.css

@@ -0,0 +1,169 @@
+/* ComboBox styles */
+.combobox {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit;
+  }
+
+  [data-slot="description"] {
+    @apply px-1;
+  }
+
+  [data-slot="input"] {
+    @apply min-w-0 flex-1;
+
+    /* Add padding-right when trigger is present */
+    &:has(+ .combobox__trigger) {
+      @apply pr-7;
+    }
+
+    /* Focus state (input.css only has focus-visible, but combobox also needs focus) */
+    &:focus,
+    &[data-focus] {
+      @apply status-focused-field;
+      border-color: var(--color-field-border-focus);
+      background-color: var(--color-field-focus);
+    }
+
+    /* Disabled state */
+    &:disabled,
+    &[data-disabled],
+    &[aria-disabled="true"] {
+      @apply status-disabled;
+    }
+  }
+}
+
+.combobox__input-group {
+  @apply relative isolate inline-flex items-center;
+}
+
+.combobox__trigger {
+  @apply absolute top-1/2 right-0 flex h-full shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center pr-2 text-field-placeholder transition duration-150 no-highlight;
+
+  /* Remove default button styles */
+  @apply border-none bg-transparent outline-none;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply text-field-foreground;
+    }
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply rounded ring-2 ring-focus ring-offset-2 ring-offset-background outline-none;
+  }
+
+  /* Pressed state */
+  &[data-pressed="true"] {
+    @apply opacity-70;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply cursor-not-allowed opacity-50;
+  }
+
+  [data-slot="combobox-trigger-default-icon"] {
+    @apply size-4 transition-transform duration-150 motion-reduce:transition-none;
+  }
+
+  /* Rotate icon when trigger is open */
+  &[data-open="true"] [data-slot="combobox-trigger-default-icon"] {
+    @apply rotate-180;
+  }
+}
+
+/* Similar to popover content styles */
+.combobox__popover {
+  @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 text-sm will-change-[opacity,transform];
+  box-shadow: var(--shadow-overlay);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  /* Entering animations */
+  &[data-entering="true"] {
+    @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-95;
+
+    /* 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);
+  }
+
+  /* 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;
+  }
+
+  /* Listbox styles */
+  [data-slot="listbox"] {
+    @apply p-1.5 outline-none;
+  }
+
+  [data-slot="listbox-item"] {
+    @apply px-2.5;
+
+    /* As the combobox is single-select, we don't need to animate the checkmark */
+    [data-slot="listbox-item-indicator--checkmark"] {
+      @apply transition-none;
+    }
+  }
+}
+
+/* Full width modifier */
+.combobox--full-width {
+  @apply w-full;
+}
+
+.combobox__input-group--full-width {
+  @apply w-full;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-field/date-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/date-field/date-field.styles.js

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

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

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

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

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

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

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

package/dist/components/date-field.css

@@ -0,0 +1,24 @@
+/* Date field styles */
+.date-field {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit;
+  }
+
+  [data-slot="description"] {
+    @apply px-1;
+  }
+}
+
+/* Full width modifier */
+.date-field--full-width {
+  @apply w-full;
+}

package/dist/components/date-input-group/date-input-group.styles.d.ts

@@ -0,0 +1,43 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const dateInputGroupVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    prefix: string;
+    segment: string;
+    suffix: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    prefix: string;
+    segment: string;
+    suffix: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    prefix: string;
+    segment: string;
+    suffix: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DateInputGroupVariants = VariantProps<typeof dateInputGroupVariants>;
+//# sourceMappingURL=date-input-group.styles.d.ts.map

package/dist/components/date-input-group/date-input-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-input-group/date-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmBjC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAC/C,OAAO,sBAAsB,CAC9B,CAAC"}

package/dist/components/date-input-group/date-input-group.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+const dateInputGroupVariants = tv({
+    defaultVariants: {
+        fullWidth: false,
+    },
+    slots: {
+        base: "date-input-group",
+        input: "date-input-group__input",
+        prefix: "date-input-group__prefix",
+        segment: "date-input-group__segment",
+        suffix: "date-input-group__suffix",
+    },
+    variants: {
+        fullWidth: {
+            false: {},
+            true: {
+                base: "date-input-group--full-width",
+            },
+        },
+    },
+});
+
+export { dateInputGroupVariants };

package/dist/components/date-input-group/index.d.ts

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

package/dist/components/date-input-group/index.d.ts.map

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

package/dist/components/date-input-group/index.js

@@ -0,0 +1 @@
+export { dateInputGroupVariants } from './date-input-group.styles.js';

package/dist/components/date-input-group.css

@@ -0,0 +1,116 @@
+/* Date input group styles */
+.date-input-group {
+  @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground outline-none;
+  @apply ring ring-borderColor-default;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 150ms var(--ease-smooth),
+    border-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &[data-hovered="true"]:not([data-focus-within="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Focus within state */
+  &[data-focus-within="true"],
+  &:focus-within {
+    @apply status-focused-field;
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+    border-color: var(--color-field-border-invalid);
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.date-input-group__input {
+  @apply flex flex-1 cursor-text items-center gap-px rounded-none  border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;
+
+  /* Remove border radius on left side when prefix is present */
+  .date-input-group:has([data-slot="date-input-group-prefix"]) & {
+    @apply rounded-l-none pl-2;
+  }
+
+  /* Remove border radius on right side when suffix is present */
+  .date-input-group:has([data-slot="date-input-group-suffix"]) & {
+    @apply rounded-r-none pr-2;
+  }
+
+  /* Focus state - handled by group */
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+}
+
+.date-input-group__segment {
+  @apply inline-block rounded-md px-0.5 text-end tabular-nums outline-none;
+
+  /* Segment separators styling "/" */
+  &[data-type="literal"] {
+    @apply p-0 text-muted;
+  }
+
+  /* Placeholder styling */
+  &[data-placeholder="true"] {
+    @apply text-field-placeholder;
+  }
+
+  /* Focused segment */
+  &:focus,
+  &[data-focused="true"] {
+    @apply bg-accent-soft text-accent-soft-foreground;
+  }
+
+  /* Disabled segment */
+  &[data-disabled="true"] {
+    @apply opacity-50;
+  }
+
+  /* Invalid segment */
+  &[data-invalid="true"] {
+    @apply text-danger;
+
+    /* Focused segment */
+    &:focus,
+    &[data-focused="true"] {
+      @apply bg-danger-soft text-danger-soft-foreground;
+    }
+  }
+}
+
+.date-input-group__prefix {
+  @apply pointer-events-none shrink-0 text-field-placeholder;
+  @apply mr-0 ml-3 flex items-center;
+}
+
+.date-input-group__suffix {
+  @apply pointer-events-none shrink-0 text-field-placeholder;
+  @apply mr-3 flex items-center;
+}
+
+/* Full width modifier */
+.date-input-group--full-width {
+  @apply w-full;
+}

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const datePickerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    input: string;
+}, "date-picker", {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    trigger: string;
+    input: string;
+}, "date-picker", unknown, unknown, undefined>>;
+export type DatePickerVariants = VariantProps<typeof datePickerVariants>;
+//# sourceMappingURL=date-picker.styles.d.ts.map

package/dist/components/date-picker/date-picker.styles.d.ts.map

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

package/dist/components/date-picker/date-picker.styles.js

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+const datePickerVariants = tv({
+    base: "date-picker",
+    slots: {
+        trigger: "date-picker__trigger",
+        input: "date-picker__input",
+    },
+});
+
+export { datePickerVariants };

package/dist/components/date-picker/index.d.ts

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

package/dist/components/date-picker/index.d.ts.map

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

package/dist/components/date-picker/index.js

@@ -0,0 +1 @@
+export { datePickerVariants } from './date-picker.styles.js';