@arobo/styles 1.0.1 → 1.1.0

package/src/components/spinner/spinner.styles.ts

@@ -0,0 +1,28 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const spinnerVariants = tv({
+  base: "spinner",
+  defaultVariants: {
+    color: "accent",
+    size: "md",
+  },
+  variants: {
+    color: {
+      accent: "spinner--accent",
+      current: "spinner--current",
+      danger: "spinner--danger",
+      success: "spinner--success",
+      warning: "spinner--warning",
+    },
+    size: {
+      lg: "spinner--lg",
+      md: "spinner--md",
+      sm: "spinner--sm",
+      xl: "spinner--xl",
+    },
+  },
+});
+
+export type SpinnerVariants = VariantProps<typeof spinnerVariants>;

package/src/components/switch/index.ts

@@ -0,0 +1 @@
+export * from "./switch.styles";

package/src/components/switch/switch.styles.ts

@@ -0,0 +1,30 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const switchVariants = tv({
+  defaultVariants: {
+    size: "md",
+  },
+  slots: {
+    base: "switch",
+    control: "switch__control",
+    icon: "switch__icon",
+    thumb: "switch__thumb",
+  },
+  variants: {
+    size: {
+      lg: {
+        base: "switch--lg",
+      },
+      md: {
+        base: "switch--md",
+      },
+      sm: {
+        base: "switch--sm",
+      },
+    },
+  },
+});
+
+export type SwitchVariants = VariantProps<typeof switchVariants>;

package/src/components/tabs/index.ts

@@ -0,0 +1 @@
+export * from "./tabs.styles";

package/src/components/tabs/tabs.styles.ts

@@ -0,0 +1,30 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const tabsVariants = tv({
+  defaultVariants: {
+    variant: "primary",
+  },
+  slots: {
+    base: "tabs",
+    tab: "tabs__tab",
+    tabIndicator: "tabs__indicator",
+    tabList: "tabs__list",
+    tabListContainer: "tabs__list-container",
+    tabPanel: "tabs__panel",
+  },
+  variants: {
+    variant: {
+      primary: {},
+      secondary: {
+        base: "tabs--secondary",
+      },
+    },
+  },
+});
+
+// Render props that should be excluded from TabsVariants (framework-specific)
+type TabsRenderPropsKeys = "selectedKey";
+
+export type TabsVariants = Omit<VariantProps<typeof tabsVariants>, TabsRenderPropsKeys>;

package/src/components/tag/index.ts

@@ -0,0 +1 @@
+export * from "./tag.styles";

package/src/components/tag/tag.styles.ts

@@ -0,0 +1,37 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const tagVariants = tv({
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+  },
+  slots: {
+    base: "tag",
+    removeButton: "tag__remove-button",
+  },
+  variants: {
+    size: {
+      lg: {
+        base: "tag--lg",
+      },
+      md: {
+        base: "tag--md",
+      },
+      sm: {
+        base: "tag--sm",
+      },
+    },
+    variant: {
+      default: {
+        base: "tag--default",
+      },
+      surface: {
+        base: "tag--surface",
+      },
+    },
+  },
+});
+
+export type TagVariants = VariantProps<typeof tagVariants>;

package/src/components/tag-group/index.ts

@@ -0,0 +1 @@
+export * from "./tag-group.styles";

package/src/components/tag-group/tag-group.styles.ts

@@ -0,0 +1,12 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const tagGroupVariants = tv({
+  slots: {
+    base: "tag-group",
+    list: "tag-group__list",
+  },
+});
+
+export type TagGroupVariants = VariantProps<typeof tagGroupVariants>;

package/src/components/textarea/index.ts

@@ -0,0 +1 @@
+export * from "./textarea.styles";

package/src/components/textarea/textarea.styles.ts

@@ -0,0 +1,23 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export 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 type TextAreaVariants = VariantProps<typeof textAreaVariants>;

package/src/components/toast/index.ts

@@ -0,0 +1 @@
+export * from "./toast.styles";

package/src/components/toast/toast.styles.ts

@@ -0,0 +1,67 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export 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 type ToastVariants = VariantProps<typeof toastVariants>;

package/src/components/toggle-button/index.ts

@@ -0,0 +1 @@
+export * from './toggle-button.styles';

package/src/components/toggle-button/toggle-button.styles.ts

@@ -0,0 +1,38 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const toggleButtonVariants = tv({
+  base: "toggle-button",
+  defaultVariants: {
+    fullWidth: false,
+    isIconOnly: false,
+    size: "md",
+    variant: "primary",
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "toggle-button--full-width",
+    },
+    isIconOnly: {
+      true: "toggle-button--icon-only",
+    },
+    size: {
+      lg: "toggle-button--lg",
+      md: "toggle-button--md",
+      sm: "toggle-button--sm",
+    },
+    variant: {
+      danger: "toggle-button--danger",
+      "danger-soft": "toggle-button--danger-soft",
+      ghost: "toggle-button--ghost",
+      outline: "toggle-button--outline",
+      primary: "toggle-button--primary",
+      secondary: "toggle-button--secondary",
+      tertiary: "toggle-button--tertiary",
+    },
+  },
+});
+
+export type ToggleButtonVariants = VariantProps<typeof toggleButtonVariants>;

package/src/components/toggle-button-group/index.ts

@@ -0,0 +1 @@
+export * from './toggle-button-group.styles';

package/src/components/toggle-button-group/toggle-button-group.styles.ts

@@ -0,0 +1,38 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const toggleButtonGroupVariants = tv({
+  base: "toggle-button-group",
+  defaultVariants: {
+    fullWidth: false,
+    isIconOnly: false,
+    size: "md",
+    variant: "primary",
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "toggle-button-group--full-width",
+    },
+    isIconOnly: {
+      true: "toggle-button-group--icon-only",
+    },
+    size: {
+      lg: "toggle-button-group--lg",
+      md: "toggle-button-group--md",
+      sm: "toggle-button-group--sm",
+    },
+    variant: {
+      danger: "toggle-button-group--danger",
+      "danger-soft": "toggle-button-group--danger-soft",
+      ghost: "toggle-button-group--ghost",
+      outline: "toggle-button-group--outline",
+      primary: "toggle-button-group--primary",
+      secondary: "toggle-button-group--secondary",
+      tertiary: "toggle-button-group--tertiary",
+    },
+  },
+});
+
+export type ToggleButtonGroupVariants = VariantProps<typeof toggleButtonGroupVariants>;

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./tooltip.styles";

package/src/components/tooltip/tooltip.styles.ts

@@ -0,0 +1,12 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const tooltipVariants = tv({
+  slots: {
+    base: "tooltip",
+    trigger: "tooltip__trigger",
+  },
+});
+
+export type TooltipVariants = VariantProps<typeof tooltipVariants>;

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

@@ -1,69 +0,0 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const fieldBorderStyles: import("tailwind-variants").TVReturnType<{
-    isFocusWithin: {
-        false: string;
-        true: string;
-    };
-    isInvalid: {
-        true: string;
-    };
-    isDisabled: {
-        true: string;
-    };
-}, undefined, "transition", {
-    isFocusWithin: {
-        false: string;
-        true: string;
-    };
-    isInvalid: {
-        true: string;
-    };
-    isDisabled: {
-        true: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    isFocusWithin: {
-        false: string;
-        true: string;
-    };
-    isInvalid: {
-        true: string;
-    };
-    isDisabled: {
-        true: string;
-    };
-}, undefined, "transition", unknown, unknown, undefined>>;
-export declare const fieldGroupVariants: import("tailwind-variants").TVReturnType<{
-    isFocusWithin: {
-        false: string;
-        true: string;
-    };
-    isInvalid: {
-        true: string;
-    };
-    isDisabled: {
-        true: string;
-    };
-}, undefined, "field-group", {
-    isFocusVisible: {
-        false: string;
-        true: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    isFocusVisible: {
-        false: string;
-        true: string;
-    };
-}, undefined, "focus-ring", {
-    isFocusVisible: {
-        false: string;
-        true: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    isFocusVisible: {
-        false: string;
-        true: string;
-    };
-}, undefined, "focus-ring", unknown, unknown, undefined>>>;
-export type FieldGroupVariants = VariantProps<typeof fieldGroupVariants>;
-//# sourceMappingURL=field-group.styles.d.ts.map

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

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

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

@@ -1,25 +0,0 @@
-import { focusRing } from '../../utils/state.js';
-import { tv } from 'tailwind-variants';
-
-const fieldBorderStyles = tv({
-    base: "transition",
-    variants: {
-        isFocusWithin: {
-            false: "border-neutral-300 hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500 forced-colors:border-[ButtonBorder]",
-            true: "border-neutral-600 dark:border-neutral-300 forced-colors:border-[Highlight]",
-        },
-        isInvalid: {
-            true: "border-red-600 dark:border-red-600 forced-colors:border-[Mark]",
-        },
-        isDisabled: {
-            true: "border-neutral-200 dark:border-neutral-700 forced-colors:border-[GrayText]",
-        },
-    },
-});
-const fieldGroupVariants = tv({
-    extend: focusRing,
-    base: "field-group",
-    variants: fieldBorderStyles.variants,
-});
-
-export { fieldBorderStyles, fieldGroupVariants };

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

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

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

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

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

@@ -1 +0,0 @@
-export { fieldBorderStyles, fieldGroupVariants } from './field-group.styles.js';

package/dist/components/field-group.css

@@ -1,7 +0,0 @@
-/* FieldGroup component styles */
-
-/* Base field-group styles */
-.field-group {
-  @apply flex items-center h-9 box-border;
-  @apply dark:bg-neutral-900 bg-field border border-borderColor-default rounded-field overflow-hidden transition;
-}

package/src/components/field-group/field-group.styles.ts

@@ -1,29 +0,0 @@
-import { focusRing } from "../../utils";
-import type { VariantProps } from "tailwind-variants";
-
-import { tv } from "tailwind-variants";
-
-export const fieldBorderStyles = tv({
-  base: "transition",
-  variants: {
-    isFocusWithin: {
-      false:
-        "border-neutral-300 hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500 forced-colors:border-[ButtonBorder]",
-      true: "border-neutral-600 dark:border-neutral-300 forced-colors:border-[Highlight]",
-    },
-    isInvalid: {
-      true: "border-red-600 dark:border-red-600 forced-colors:border-[Mark]",
-    },
-    isDisabled: {
-      true: "border-neutral-200 dark:border-neutral-700 forced-colors:border-[GrayText]",
-    },
-  },
-});
-
-export const fieldGroupVariants = tv({
-  extend: focusRing,
-  base: "field-group",
-  variants: fieldBorderStyles.variants,
-});
-
-export type FieldGroupVariants = VariantProps<typeof fieldGroupVariants>;

package/src/components/field-group/index.ts

@@ -1 +0,0 @@
-export * from "./field-group.styles";