@arobo/styles 1.0.1 → 1.1.1

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

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+const tagGroupVariants = tv({
+    slots: {
+        base: "tag-group",
+        list: "tag-group__list",
+    },
+});
+
+export { tagGroupVariants };

package/dist/components/tag-group.css

@@ -0,0 +1,15 @@
+/* Base styles */
+.tag-group {
+  @apply relative flex flex-col gap-1;
+}
+
+.tag-group__list {
+  @apply relative flex flex-wrap gap-1.5;
+}
+
+.tag-group [slot="description"],
+.tag-group [data-slot="description"],
+.tag-group [slot="errorMessage"],
+.tag-group [data-slot="error-message"] {
+  @apply p-1;
+}

package/dist/components/tag.css

@@ -0,0 +1,98 @@
+/* Tag component styles */
+.tag {
+  --optical-offset: 0.031em;
+
+  @apply relative inline-flex items-center gap-1 rounded-full font-medium select-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 100ms var(--ease-smooth),
+    scale 100ms var(--ease-smooth),
+    opacity 100ms var(--ease-smooth),
+    background-color 100ms var(--ease-smooth),
+    box-shadow 100ms var(--ease-out);
+  @apply origin-center transform-gpu will-change-transform motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* SVG icon styling */
+  & svg {
+    @apply pointer-events-none size-3 shrink-0 self-center text-current;
+  }
+}
+
+/* Disabled state */
+.tag:is([data-disabled="true"], [aria-disabled="true"]) {
+  @apply status-disabled;
+}
+
+/* Focus visible state (keyboard focus only) */
+.tag:is(:focus-visible, [data-focus-visible]) {
+  @apply status-focused;
+}
+
+/* Pressed/Active state */
+.tag:is(:active, [data-pressed="true"]) {
+}
+
+/* Selected state */
+.tag:is([data-selected="true"], [aria-selected="true"]) {
+  @apply bg-accent-soft text-accent-soft-foreground;
+
+  /* Selected + Hover state */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]) {
+      @apply bg-accent-soft-hover;
+    }
+  }
+}
+
+/* Size */
+.tag--sm {
+  @apply px-1 py-0.5 text-xs;
+}
+
+.tag--md {
+  @apply px-1.5 py-1 text-xs;
+}
+
+.tag--lg {
+  @apply px-2.5 py-1.5 text-sm;
+}
+
+/* Variant */
+.tag--default {
+  @apply bg-default text-default-foreground;
+
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply bg-default-hover;
+    }
+  }
+}
+
+.tag--surface {
+  @apply bg-surface text-surface-foreground;
+
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply bg-surface-hover;
+    }
+  }
+}
+
+/* Remove Button  */
+.tag__remove-button {
+  @apply size-3 text-inherit;
+
+  /* SVG icon styling */
+  & svg {
+    @apply size-[inherit] shrink-0 self-center text-current;
+  }
+}

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

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

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

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

package/dist/components/textarea/index.js

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

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

@@ -0,0 +1,31 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const textAreaVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "textarea", {
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "textarea", unknown, unknown, undefined>>;
+export type TextAreaVariants = VariantProps<typeof textAreaVariants>;
+//# sourceMappingURL=textarea.styles.d.ts.map

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

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

package/dist/components/textarea/textarea.styles.js

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+
+const textAreaVariants = tv({
+    base: "textarea",
+    defaultVariants: {
+        fullWidth: false,
+        variant: "primary",
+    },
+    variants: {
+        fullWidth: {
+            false: "",
+            true: "textarea--full-width",
+        },
+        variant: {
+            primary: "textarea--primary",
+            secondary: "textarea--secondary",
+        },
+    },
+});
+
+export { textAreaVariants };

package/dist/components/textarea.css

@@ -0,0 +1,92 @@
+.textarea {
+  @apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;
+
+  min-height: 38px;
+
+  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;
+
+  @media (hover: hover) {
+    &:hover:not(:focus):not(:focus-visible),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Focus state */
+  &:focus,
+  &[data-focused="true"] {
+    @apply status-focused-field;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+  }
+
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* Variant property definitions */
+.textarea--primary {
+  /* Default styles */
+}
+
+.textarea--secondary {
+  @apply shadow-none;
+  background-color: var(--textarea-bg);
+
+  --textarea-bg: var(--color-default);
+  --textarea-bg-hover: var(--color-default-hover);
+  --textarea-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover:not(:focus):not(:focus-visible),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+      background-color: var(--textarea-bg-hover);
+    }
+  }
+
+  &:focus,
+  &[data-focused="true"] {
+    background-color: var(--textarea-bg-focus);
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--textarea-bg-focus);
+  }
+}
+
+/* Full width modifier */
+.textarea--full-width {
+  @apply w-full;
+}

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

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

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

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

package/dist/components/toast/index.js

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

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

@@ -0,0 +1,163 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const toastVariants: import("tailwind-variants").TVReturnType<{
+    placement: {
+        bottom: {
+            region: string;
+            toast: string;
+        };
+        "bottom end": {
+            region: string;
+            toast: string;
+        };
+        "bottom start": {
+            region: string;
+            toast: string;
+        };
+        top: {
+            region: string;
+            toast: string;
+        };
+        "top end": {
+            region: string;
+            toast: string;
+        };
+        "top start": {
+            region: string;
+            toast: string;
+        };
+    };
+    variant: {
+        accent: {
+            toast: string;
+        };
+        danger: {
+            toast: string;
+        };
+        default: {
+            toast: string;
+        };
+        success: {
+            toast: string;
+        };
+        warning: {
+            toast: string;
+        };
+    };
+}, {
+    action: string;
+    close: string;
+    content: string;
+    description: string;
+    indicator: string;
+    region: string;
+    title: string;
+    toast: string;
+}, undefined, {
+    placement: {
+        bottom: {
+            region: string;
+            toast: string;
+        };
+        "bottom end": {
+            region: string;
+            toast: string;
+        };
+        "bottom start": {
+            region: string;
+            toast: string;
+        };
+        top: {
+            region: string;
+            toast: string;
+        };
+        "top end": {
+            region: string;
+            toast: string;
+        };
+        "top start": {
+            region: string;
+            toast: string;
+        };
+    };
+    variant: {
+        accent: {
+            toast: string;
+        };
+        danger: {
+            toast: string;
+        };
+        default: {
+            toast: string;
+        };
+        success: {
+            toast: string;
+        };
+        warning: {
+            toast: string;
+        };
+    };
+}, {
+    action: string;
+    close: string;
+    content: string;
+    description: string;
+    indicator: string;
+    region: string;
+    title: string;
+    toast: string;
+}, import("tailwind-variants").TVReturnType<{
+    placement: {
+        bottom: {
+            region: string;
+            toast: string;
+        };
+        "bottom end": {
+            region: string;
+            toast: string;
+        };
+        "bottom start": {
+            region: string;
+            toast: string;
+        };
+        top: {
+            region: string;
+            toast: string;
+        };
+        "top end": {
+            region: string;
+            toast: string;
+        };
+        "top start": {
+            region: string;
+            toast: string;
+        };
+    };
+    variant: {
+        accent: {
+            toast: string;
+        };
+        danger: {
+            toast: string;
+        };
+        default: {
+            toast: string;
+        };
+        success: {
+            toast: string;
+        };
+        warning: {
+            toast: string;
+        };
+    };
+}, {
+    action: string;
+    close: string;
+    content: string;
+    description: string;
+    indicator: string;
+    region: string;
+    title: string;
+    toast: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ToastVariants = VariantProps<typeof toastVariants>;
+//# sourceMappingURL=toast.styles.d.ts.map

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

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

package/dist/components/toast/toast.styles.js

@@ -0,0 +1,65 @@
+import { tv } from 'tailwind-variants';
+
+const toastVariants = tv({
+    defaultVariants: {
+        placement: "bottom",
+        variant: "default",
+    },
+    slots: {
+        action: "toast__action",
+        close: "toast__close-button",
+        content: "toast__content",
+        description: "toast__description",
+        indicator: "toast__indicator",
+        region: "toast-region",
+        title: "toast__title",
+        toast: "toast",
+    },
+    variants: {
+        placement: {
+            bottom: {
+                region: "toast-region--bottom",
+                toast: "toast--bottom",
+            },
+            "bottom end": {
+                region: "toast-region--bottom-end",
+                toast: "toast--bottom-end",
+            },
+            "bottom start": {
+                region: "toast-region--bottom-start",
+                toast: "toast--bottom-start",
+            },
+            top: {
+                region: "toast-region--top",
+                toast: "toast--top",
+            },
+            "top end": {
+                region: "toast-region--top-end",
+                toast: "toast--top-end",
+            },
+            "top start": {
+                region: "toast-region--top-start",
+                toast: "toast--top-start",
+            },
+        },
+        variant: {
+            accent: {
+                toast: "toast--accent",
+            },
+            danger: {
+                toast: "toast--danger",
+            },
+            default: {
+                toast: "toast--default",
+            },
+            success: {
+                toast: "toast--success",
+            },
+            warning: {
+                toast: "toast--warning",
+            },
+        },
+    },
+});
+
+export { toastVariants };