@arobo/styles 1.0.1 → 1.1.1

package/dist/components/input-group.css

@@ -0,0 +1,172 @@
+/* Input group styles */
+.input-group {
+  @apply inline-flex min-h-9 items-center overflow-hidden rounded-field bg-field text-sm text-field-foreground outline-none;
+  @apply ring ring-borderColor-default;
+
+  /* When textarea is present, align items to start and allow height to grow */
+  &:has([data-slot="input-group-textarea"]) {
+    @apply items-start;
+    height: auto;
+  }
+
+  /**
+   * 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;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  /* 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;
+  }
+}
+
+.input-group__input {
+  @apply flex-1 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 */
+  .input-group:has([data-slot="input-group-prefix"]) & {
+    @apply rounded-l-none pl-0;
+  }
+
+  /* Remove border radius on right side when suffix is present */
+  .input-group:has([data-slot="input-group-suffix"]) & {
+    @apply rounded-r-none pr-0;
+  }
+
+  /* Focus state - handled by group */
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+}
+
+/* TextArea within InputGroup - uses same base class as input but with textarea-specific styles */
+.input-group__input[data-slot="input-group-textarea"] {
+  min-height: 38px;
+  resize: vertical;
+}
+
+.input-group__prefix {
+  @apply flex h-full items-center justify-center rounded-l-field rounded-r-none bg-transparent px-3 text-fgColor-muted;
+  border-width: 0px;
+  border-color: var(--color-field-border);
+  border-style: solid;
+  border-right-color: var(--color-field-border);
+  border-left: none;
+  border-top: none;
+  border-bottom: none;
+
+  /* Align to top when textarea is present */
+  .input-group:has([data-slot="input-group-textarea"]) & {
+    @apply items-start;
+    padding-top: 0.5rem;
+  }
+
+  /**
+   * 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);
+  @apply motion-reduce:transition-none;
+}
+
+.input-group__suffix {
+  @apply flex h-full items-center justify-center rounded-l-none rounded-r-field bg-transparent px-3 text-fgColor-muted;
+  border-width: 0px;
+  border-color: var(--color-field-border);
+  border-style: solid;
+  border-left-color: var(--color-field-border);
+  border-right: none;
+  border-top: none;
+  border-bottom: none;
+
+  /* Align to top when textarea is present */
+  .input-group:has([data-slot="input-group-textarea"]) & {
+    @apply items-start;
+    padding-top: 0.5rem;
+  }
+
+  /**
+   * 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);
+  @apply motion-reduce:transition-none;
+}
+
+/* Variant property definitions */
+.input-group--primary {
+  /* Default styles */
+}
+
+.input-group--secondary {
+  @apply shadow-none;
+  background-color: var(--input-group-bg);
+
+  --input-group-bg: var(--color-default);
+  --input-group-bg-hover: var(--color-default-hover);
+  --input-group-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &[data-hovered="true"]:not([data-focus-within="true"]) {
+      background-color: var(--input-group-bg-hover);
+    }
+  }
+
+  &:focus-within,
+  &[data-focus-within="true"] {
+    background-color: var(--input-group-bg-focus);
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    border-color: var(--color-field-border-invalid);
+    background-color: var(--input-group-bg-focus);
+  }
+
+  [data-slot="input-group-input"],
+  [data-slot="input-group-textarea"] {
+    @apply bg-transparent;
+  }
+}
+
+/* Full width modifier */
+.input-group--full-width {
+  @apply w-full;
+}

package/dist/components/input-otp/index.d.ts

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

package/dist/components/input-otp/index.d.ts.map

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

package/dist/components/input-otp/index.js

@@ -0,0 +1 @@
+export { inputOTPVariants } from './input-otp.styles.js';

package/dist/components/input-otp/input-otp.styles.d.ts

@@ -0,0 +1,55 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const inputOTPVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    caret: string;
+    group: string;
+    input: string;
+    separator: string;
+    slot: string;
+    slotValue: string;
+}, undefined, {
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    caret: string;
+    group: string;
+    input: string;
+    separator: string;
+    slot: string;
+    slotValue: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    caret: string;
+    group: string;
+    input: string;
+    separator: string;
+    slot: string;
+    slotValue: string;
+}, undefined, unknown, unknown, undefined>>;
+export type InputOTPVariants = VariantProps<typeof inputOTPVariants>;
+//# sourceMappingURL=input-otp.styles.d.ts.map

package/dist/components/input-otp/input-otp.styles.d.ts.map

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

package/dist/components/input-otp/input-otp.styles.js

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+
+const inputOTPVariants = tv({
+    defaultVariants: {
+        variant: "primary",
+    },
+    slots: {
+        base: "input-otp",
+        caret: "input-otp__caret",
+        group: "input-otp__group",
+        input: "input-otp__input",
+        separator: "input-otp__separator",
+        slot: "input-otp__slot",
+        slotValue: "input-otp__slot-value",
+    },
+    variants: {
+        variant: {
+            primary: {
+                base: "input-otp--primary",
+            },
+            secondary: {
+                base: "input-otp--secondary",
+            },
+        },
+    },
+});
+
+export { inputOTPVariants };

package/dist/components/input-otp.css

@@ -0,0 +1,121 @@
+/* Base container */
+.input-otp {
+  @apply relative flex items-center gap-2;
+
+  &[data-disabled="true"] {
+    @apply cursor-not-allowed opacity-50;
+  }
+}
+
+/* Group - slots separated with gap */
+.input-otp__group {
+  @apply flex items-center gap-2;
+}
+
+/* Individual slot box - fully rounded, standalone */
+.input-otp__slot {
+  @apply relative flex h-10 w-9.5 flex-1 items-center justify-center;
+  @apply bg-field text-field-foreground ring ring-borderColor-default;
+  @apply rounded-field text-sm font-semibold outline-none;
+
+  /**
+   * 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 */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Active/Focus */
+  &[data-active="true"] {
+    @apply z-10 bg-field-focus status-focused-field;
+  }
+
+  /* Filled */
+  &[data-filled="true"] {
+    @apply bg-field-focus;
+  }
+
+  /* Disabled */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Invalid */
+  &[data-invalid="true"] {
+    @apply status-invalid-field text-foreground;
+    background-color: var(--color-field-focus);
+  }
+}
+
+/* Slot value */
+.input-otp__slot-value {
+  @apply text-lg leading-6 tracking-[-0.27px];
+
+  /**
+   * Animations
+   * CRITICAL: motion-reduce must be AFTER animation for correct override specificity
+   */
+  animation: slot-value-in 250ms var(--ease-smooth) both;
+  transform-origin: bottom center;
+  @apply motion-reduce:animate-none;
+}
+
+/* Caret */
+.input-otp__caret {
+  @apply absolute h-4 w-[2px] animate-caret-blink rounded-[4px] bg-field-placeholder;
+}
+
+/* Separator */
+.input-otp__separator {
+  @apply h-[2px] w-[6px] shrink-0 rounded-[4px] bg-separator;
+}
+
+/* Variant property definitions */
+.input-otp--primary {
+  /* Default styles */
+}
+
+.input-otp--secondary .input-otp__slot {
+  @apply shadow-none;
+  background-color: var(--input-otp-slot-bg);
+
+  --input-otp-slot-bg: var(--color-default);
+  --input-otp-slot-bg-hover: var(--color-default-hover);
+  --input-otp-slot-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--input-otp-slot-bg-hover);
+    }
+  }
+
+  &[data-active="true"],
+  &[data-filled="true"] {
+    background-color: var(--input-otp-slot-bg-focus);
+  }
+}
+
+/* Animations */
+@keyframes slot-value-in {
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/dist/components/input.css

@@ -1,8 +1,5 @@
 .input {
-  @apply rounded-field ring ring-borderColor-default border bg-field px-3 py-2 text-base text-field-foreground outline-none placeholder:text-field-placeholder sm:text-sm;
-
-  border-width: var(--border-width-field);
-  border-color: var(--color-field-border);
+  @apply rounded-field ring ring-borderColor-default bg-field px-3 py-2 text-base text-field-foreground outline-none placeholder:text-field-placeholder sm:text-sm;
 
   /**
    * Transitions

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

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

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

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

package/dist/components/kbd/index.js

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

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

@@ -0,0 +1,31 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const kbdVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        light: string;
+    };
+}, {
+    abbr: string;
+    base: string;
+    content: string;
+}, undefined, {
+    variant: {
+        default: string;
+        light: string;
+    };
+}, {
+    abbr: string;
+    base: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        light: string;
+    };
+}, {
+    abbr: string;
+    base: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type KbdVariants = VariantProps<typeof kbdVariants>;
+//# sourceMappingURL=kbd.styles.d.ts.map

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

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

package/dist/components/kbd/kbd.styles.js

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+
+const kbdVariants = tv({
+    defaultVariants: {},
+    slots: {
+        abbr: "kbd__abbr",
+        base: "kbd",
+        content: "kbd__content",
+    },
+    variants: {
+        variant: {
+            default: "kbd--default",
+            light: "kbd--light",
+        },
+    },
+});
+
+export { kbdVariants };

package/dist/components/kbd.css

@@ -0,0 +1,27 @@
+/* Base styles */
+.kbd {
+  @apply inline-flex h-6 items-center space-x-0.5 rounded-lg bg-default px-2 text-center font-sans text-sm font-medium whitespace-nowrap text-muted rtl:space-x-reverse;
+  word-spacing: -0.25rem;
+}
+
+/* Key abbreviation styles */
+.kbd__abbr {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
+}
+
+/* Content wrapper */
+.kbd__content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Variant styles */
+.kbd--light {
+  @apply bg-transparent;
+}

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

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

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

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

package/dist/components/link/index.js

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

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

@@ -0,0 +1,36 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const linkVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+type LinkRenderPropsKeys = "isCurrent" | "isHovered" | "isPressed" | "isFocused" | "isFocusVisible" | "isDisabled";
+export type LinkVariants = Omit<VariantProps<typeof linkVariants>, LinkRenderPropsKeys>;
+export {};
+//# sourceMappingURL=link.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.styles.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAKvB,CAAC;AAGH,KAAK,mBAAmB,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,gBAAgB,GAChB,YAAY,CAAC;AAEjB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,mBAAmB,CAAC,CAAC"}

package/dist/components/link/link.styles.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+const linkVariants = tv({
+    slots: {
+        base: "link",
+        icon: "link__icon",
+    },
+});
+
+export { linkVariants };

package/dist/components/link.css

@@ -0,0 +1,61 @@
+/* Base link styles */
+.link {
+  @apply relative inline-flex h-fit w-fit items-center rounded-xl text-sm font-medium text-link underline decoration-separator-tertiary decoration-[1.5px] underline-offset-4 no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 100ms var(--ease-smooth),
+    text-decoration-color 100ms var(--ease-out),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out),
+    opacity 100ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply decoration-muted;
+
+      .link__icon {
+        @apply opacity-100;
+      }
+    }
+  }
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+
+    .link__icon {
+      @apply opacity-100;
+    }
+  }
+
+  /* Disabled state */
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  .link__icon {
+    @apply pointer-events-none inline-flex size-2 shrink-0 items-center justify-center text-current opacity-60;
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: opacity 150ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  .link__icon[data-default-icon="true"] {
+    @apply ml-1 pb-1.5;
+  }
+}

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

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

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

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

package/dist/components/listbox/index.js

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

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

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

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

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

package/dist/components/listbox/listbox.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const listboxVariants = tv({
+    base: "listbox",
+    defaultVariants: {
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            danger: "listbox--danger",
+            default: "listbox--default",
+        },
+    },
+});
+
+export { listboxVariants };

package/dist/components/listbox-item/index.d.ts

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

package/dist/components/listbox-item/index.d.ts.map

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