@arobo/styles 1.0.1 → 1.1.0

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

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

package/dist/components/tooltip/tooltip.styles.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+const tooltipVariants = tv({
+    slots: {
+        base: "tooltip",
+        trigger: "tooltip__trigger",
+    },
+});
+
+export { tooltipVariants };

package/dist/components/tooltip.css

@@ -0,0 +1,73 @@
+/* Tooltip component styles */
+
+/* Base tooltip styles */
+.tooltip {
+  @apply origin-(--trigger-anchor-point) rounded-xl bg-overlay px-2 py-1 text-xs will-change-[opacity,transform];
+  box-shadow: var(--shadow-overlay);
+
+  /* Entering animations */
+  &[data-entering="true"] {
+    @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-90;
+
+    /* 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="overlay-arrow"] {
+    @apply stroke-border/40;
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="overlay-arrow"] {
+    rotate: 90deg;
+  }
+}
+
+/* Tooltip trigger */
+.tooltip__trigger {
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 150ms var(--ease-smooth),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}

package/dist/index.js

@@ -1,11 +1,33 @@
 export { cn, tv } from 'tailwind-variants';
 export { buttonVariants } from './components/button/button.styles.js';
 export { buttonGroupVariants } from './components/button-group/button-group.styles.js';
+export { accordionVariants } from './components/accordion/accordion.styles.js';
+export { containerVariants } from './components/container/container.styles.js';
+export { fieldsetVariants } from './components/fieldset/fieldset.styles.js';
+export { headingVariants } from './components/heading/heading.styles.js';
+export { inputGroupVariants } from './components/input-group/input-group.styles.js';
+export { inputOTPVariants } from './components/input-otp/input-otp.styles.js';
+export { numberFieldVariants } from './components/number-field/number-field.styles.js';
+export { surfaceVariants } from './components/surface/surface.styles.js';
+export { alertVariants } from './components/alert/alert.styles.js';
+export { closeButtonVariants } from './components/close-button/close-button.styles.js';
+export { spinnerVariants } from './components/spinner/spinner.styles.js';
+export { alertDialogVariants } from './components/alert-dialog/alert-dialog.styles.js';
+export { avatarVariants } from './components/avatar/avatar.styles.js';
+export { chipVariants } from './components/chip/chip.styles.js';
+export { breadcrumbsVariants } from './components/breadcrumbs/breadcrumbs.styles.js';
+export { linkVariants } from './components/link/link.styles.js';
+export { dropdownVariants } from './components/dropdown/dropdown.styles.js';
+export { emptyVariants } from './components/empty/empty.styles.js';
+export { menuSectionVariants } from './components/menu-section/menu-section.styles.js';
+export { menuVariants } from './components/menu/menu.styles.js';
+export { menuItemVariants } from './components/menu-item/menu-item.styles.js';
+export { headerVariants } from './components/header/header.styles.js';
+export { kbdVariants } from './components/kbd/kbd.styles.js';
 export { calendarVariants } from './components/calendar/calendar.styles.js';
 export { cardVariants } from './components/card/card.styles.js';
 export { checkboxVariants } from './components/checkbox/checkbox.styles.js';
 export { checkboxGroupVariants } from './components/checkbox-group/checkbox-group.styles.js';
-export { closeButtonVariants } from './components/close-button/close-button.styles.js';
 export { comboboxVariants } from './components/combobox/combobox.styles.js';
 export { dateFieldVariants } from './components/date-field/date-field.styles.js';
 export { dateInputGroupVariants } from './components/date-input-group/date-input-group.styles.js';
@@ -14,11 +36,30 @@ export { dateRangePickerVariants } from './components/date-range-picker/date-ran
 export { descriptionVariants } from './components/description/description.styles.js';
 export { errorMessageVariants } from './components/error-message/error-message.styles.js';
 export { fieldErrorVariants } from './components/field-error/field-error.styles.js';
-export { fieldBorderStyles, fieldGroupVariants } from './components/field-group/field-group.styles.js';
 export { inputVariants } from './components/input/input.styles.js';
 export { labelVariants } from './components/label/label.styles.js';
+export { paginationVariants } from './components/pagination/pagination.styles.js';
 export { popoverVariants } from './components/popover/popover.styles.js';
 export { rangeCalendarVariants } from './components/range-calendar/range-calendar.styles.js';
-export { surfaceVariants } from './components/surface/surface.styles.js';
+export { radioVariants } from './components/radio/radio.styles.js';
+export { radioGroupVariants } from './components/radio-group/radio-group.styles.js';
+export { modalVariants } from './components/modal/modal.styles.js';
+export { listboxVariants } from './components/listbox/listbox.styles.js';
+export { listboxItemVariants } from './components/listbox-item/listbox-item.styles.js';
+export { listboxSectionVariants } from './components/listbox-section/listbox-section.styles.js';
+export { sliderVariants } from './components/slider/slider.styles.js';
+export { switchVariants } from './components/switch/switch.styles.js';
+export { tabsVariants } from './components/tabs/tabs.styles.js';
+export { textAreaVariants } from './components/textarea/textarea.styles.js';
+export { toggleButtonVariants } from './components/toggle-button/toggle-button.styles.js';
+export { toggleButtonGroupVariants } from './components/toggle-button-group/toggle-button-group.styles.js';
+export { selectVariants } from './components/select/select.styles.js';
+export { tooltipVariants } from './components/tooltip/tooltip.styles.js';
+export { tagVariants } from './components/tag/tag.styles.js';
+export { tagGroupVariants } from './components/tag-group/tag-group.styles.js';
+export { emptyStateVariants } from './components/empty-state/empty-state.styles.js';
+export { toastVariants } from './components/toast/toast.styles.js';
+export { separatorVariants } from './components/separator/separator.styles.js';
+export { scrollShadowVariants } from './components/scroll-shadow/scroll-shadow.styles.js';
 export { textFieldVariants } from './components/text-field/text-field.styles.js';
 export { focusRing } from './utils/state.js';

package/dist/themes/default/variables.css

@@ -15,9 +15,14 @@
     /* Spacing scale */
     --spacing: 0.25rem;
 
+    /* Motion */
+    --duration-fast: 120ms;
+    --duration-base: 150ms;
+    --duration-slow: 200ms;
+
     /* Border */
     --border-width: 1px;
-    --field-border-width: 0px;
+    --field-border-width: 1px;
     --disabled-opacity: 0.5;
 
     /* Ring offset - Used for focus ring */
@@ -52,6 +57,7 @@
     --scrollbar: oklch(87.1% 0.006 286.286);
 
     --default: oklch(94% 0.001 286.375);
+    --default-color-switch: oklch(85.44% 0.129 47.18);
     --default-foreground: var(--eclipse);
 
     --accent: oklch(0.6633 0.1901 44.6);
@@ -136,7 +142,7 @@
     /* Misc Colors */
     --border: oklch(90% 0.004 286.32);
     --separator: oklch(92% 0.004 286.32);
-    --focus: var(--accent);
+    --focus: color-mix(in oklab, var(--accent) 50%, var(--white) 50%);
     --link: var(--foreground);
 
     /* Shadows */
@@ -153,5 +159,41 @@
       0 0 1px 0 rgba(0, 0, 0, 0.06);
     /* Skeleton Default Global Animation */
     --skeleton-animation: shimmer; /* shimmer, pulse, none */
+
+    /* Containers */
+    --container-small: 63rem;
+    --container-medium: 71.25rem;
+    --container-large: 90rem;
+
+    /* Heading */
+    /* 40px = 160% of 25px */
+    --heading-display: 2.5rem;
+    --heading-display--line-height: 1.4;
+    --heading-display--font-weight: 500;
+
+    /* 32px */
+    --heading-title-lg: 2rem;
+    --heading-title-lg--line-height: 1.5;
+    --heading-title-lg--font-weight: 600;
+
+    /* 20px */
+    --heading-title-md: 1.25rem;
+    --heading-title-md--line-height: 1.6;
+    --heading-title-md--font-weight: 600;
+
+    /* 16 */
+    --heading-title-sm: 1rem;
+    --heading-title-sm--line-height: 1.5;
+    --heading-title-sm--font-weight: 600;
+
+    /*  */
+    --heading-subtitle: 1.25rem;
+    --heading-subtitle--line-height: 1.6;
+    --heading-subtitle--font-weight: 400;
+
+    /* Body text sizes */
+    --text-body-sm: 0.75rem;
+    --text-body-md: 0.875rem;
+    --text-body-lg: 1rem;
   }
 }

package/dist/themes/shared/theme.css

@@ -27,6 +27,7 @@
   --color-link: var(--link);
 
   --color-default: var(--default);
+  --color-default-switch: var(--default-color-switch);
   --color-default-foreground: var(--fgColor-default);
 
   --color-success: var(--success);
@@ -318,6 +319,27 @@
 
   --blur-surface-liquid: var(--surface-liquid-blur, 10px);
 
+  /* Heading */
+  --text-display: var(--heading-display);
+  --text-display--line-height: var(--heading-display--line-height);
+  --text-display--font-weight: var(--heading-display--font-weight);
+
+  --text-title-lg: var(--heading-title-lg);
+  --text-title-lg--line-height: var(--heading-title-lg--line-height);
+  --text-title-lg--font-weight: var(--heading-title-lg--font-weight);
+
+  --text-title-md: var(--heading-title-md);
+  --text-title-md--line-height: var(--heading-title-md--line-height);
+  --text-title-md--font-weight: var(--heading-title-md--font-weight);
+
+  --text-title-sm: var(--heading-title-sm);
+  --text-title-sm--line-height: var(--heading-title-sm--line-height);
+  --text-title-sm--font-weight: var(--heading-title-sm--font-weight);
+
+  --text-subtitle: var(--heading-subtitle);
+  --text-subtitle--line-height: var(--heading-subtitle--line-height);
+  --text-subtitle--font-weight: var(--heading-subtitle--font-weight);
+
   @keyframes skeleton {
     100% {
       transform: translateX(200%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arobo/styles",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "type": "module",
   "exports": {

package/src/components/accordion/accordion.styles.ts

@@ -0,0 +1,32 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const accordionVariants = tv({
+  slots: {
+    base: "accordion",
+    body: "accordion__body",
+    bodyInner: "accordion__body-inner",
+    heading: "accordion__heading",
+    indicator: "accordion__indicator",
+    item: "accordion__item",
+    panel: "accordion__panel",
+    trigger: "accordion__trigger",
+  },
+  variants: {
+    variant: {
+      default: {},
+      surface: {
+        base: "accordion--surface",
+      },
+    },
+  },
+});
+
+// Render props that should be excluded from AccordionVariants (framework-specific)
+type DisclosureRenderPropsKeys = "isExpanded" | "isDisabled" | "state";
+
+export type AccordionVariants = Omit<
+  VariantProps<typeof accordionVariants>,
+  DisclosureRenderPropsKeys
+>;

package/src/components/accordion/index.ts

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

package/src/components/alert/alert.styles.ts

@@ -0,0 +1,37 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const alertVariants = tv({
+  defaultVariants: {
+    status: "default",
+  },
+  slots: {
+    base: "alert",
+    content: "alert__content",
+    description: "alert__description",
+    indicator: "alert__indicator",
+    title: "alert__title",
+  },
+  variants: {
+    status: {
+      accent: {
+        base: "alert--accent",
+      },
+      danger: {
+        base: "alert--danger",
+      },
+      default: {
+        base: "alert--default",
+      },
+      success: {
+        base: "alert--success",
+      },
+      warning: {
+        base: "alert--warning",
+      },
+    },
+  },
+});
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/src/components/alert/index.ts

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

package/src/components/alert-dialog/alert-dialog.styles.ts

@@ -0,0 +1,72 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const alertDialogVariants = tv({
+  defaultVariants: {
+    size: "md",
+    status: "danger",
+    variant: "opaque",
+  },
+  slots: {
+    backdrop: "alert-dialog__backdrop",
+    body: "alert-dialog__body",
+    closeTrigger: "alert-dialog__close-trigger",
+    container: "alert-dialog__container",
+    dialog: "alert-dialog__dialog",
+    footer: "alert-dialog__footer",
+    header: "alert-dialog__header",
+    heading: "alert-dialog__heading",
+    icon: "alert-dialog__icon",
+    trigger: "alert-dialog__trigger",
+  },
+  variants: {
+    size: {
+      cover: {
+        dialog: "alert-dialog__dialog--cover",
+      },
+      lg: {
+        dialog: "alert-dialog__dialog--lg",
+      },
+      md: {
+        dialog: "alert-dialog__dialog--md",
+      },
+      sm: {
+        dialog: "alert-dialog__dialog--sm",
+      },
+      xs: {
+        dialog: "alert-dialog__dialog--xs",
+      },
+    },
+    status: {
+      accent: {
+        icon: "alert-dialog__icon--accent",
+      },
+      danger: {
+        icon: "alert-dialog__icon--danger",
+      },
+      default: {
+        icon: "alert-dialog__icon--default",
+      },
+      success: {
+        icon: "alert-dialog__icon--success",
+      },
+      warning: {
+        icon: "alert-dialog__icon--warning",
+      },
+    },
+    variant: {
+      blur: {
+        backdrop: "alert-dialog__backdrop--blur",
+      },
+      opaque: {
+        backdrop: "alert-dialog__backdrop--opaque",
+      },
+      transparent: {
+        backdrop: "alert-dialog__backdrop--transparent",
+      },
+    },
+  },
+});
+
+export type AlertDialogVariants = VariantProps<typeof alertDialogVariants>;

package/src/components/alert-dialog/index.ts

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

package/src/components/avatar/avatar.styles.ts

@@ -0,0 +1,53 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const avatarVariants = tv({
+  defaultVariants: {
+    color: "default",
+    size: "md",
+  },
+  slots: {
+    base: "avatar",
+    fallback: "avatar__fallback",
+    image: "avatar__image",
+  },
+  variants: {
+    color: {
+      accent: {
+        fallback: "avatar__fallback--accent",
+      },
+      danger: {
+        fallback: "avatar__fallback--danger",
+      },
+      default: {
+        fallback: "avatar__fallback--default",
+      },
+      success: {
+        fallback: "avatar__fallback--success",
+      },
+      warning: {
+        fallback: "avatar__fallback--warning",
+      },
+    },
+    size: {
+      lg: {
+        base: "avatar--lg",
+      },
+      md: {
+        base: "avatar--md",
+      },
+      sm: {
+        base: "avatar--sm",
+      },
+    },
+    variant: {
+      default: {},
+      soft: {
+        base: "avatar--soft",
+      },
+    },
+  },
+});
+
+export type AvatarVariants = VariantProps<typeof avatarVariants>;

package/src/components/avatar/index.ts

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

package/src/components/breadcrumbs/breadcrumbs.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const breadcrumbsVariants = tv({
+  slots: {
+    base: "breadcrumbs",
+    item: "breadcrumbs__item",
+    link: "breadcrumbs__link",
+    separator: "breadcrumbs__separator",
+  },
+});
+
+export type BreadcrumbsVariants = VariantProps<typeof breadcrumbsVariants>;

package/src/components/breadcrumbs/index.ts

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

package/src/components/chip/chip.styles.ts

@@ -0,0 +1,33 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const chipVariants = tv({
+  base: "chip",
+  defaultVariants: {
+    color: "default",
+    variant: "secondary",
+  },
+  variants: {
+    color: {
+      accent: "chip--accent",
+      danger: "chip--danger",
+      default: "chip--default",
+      success: "chip--success",
+      warning: "chip--warning",
+    },
+    size: {
+      lg: "chip--lg",
+      md: "chip--md",
+      sm: "chip--sm",
+    },
+    variant: {
+      primary: "chip--primary",
+      secondary: "chip--secondary",
+      soft: "chip--soft",
+      tertiary: "chip--tertiary",
+    },
+  },
+});
+
+export type ChipVariants = VariantProps<typeof chipVariants>;

package/src/components/chip/index.ts

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

package/src/components/container/container.styles.ts

@@ -0,0 +1,20 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const containerVariants = tv({
+  base: "container__base",
+  defaultVariants: {
+    size: "md",
+  },
+  variants: {
+    size: {
+      sm: "container__base--sm",
+      md: "container__base--md",
+      lg: "container__base--lg",
+      fluid: "container__base--fluid",
+    },
+  },
+});
+
+export type ContainerVariants = VariantProps<typeof containerVariants>;

package/src/components/container/index.ts

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

package/src/components/dropdown/dropdown.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const dropdownVariants = tv({
+  slots: {
+    menu: "dropdown__menu",
+    popover: "dropdown__popover",
+    root: "dropdown",
+    trigger: "dropdown__trigger",
+  },
+});
+
+export type DropdownVariants = VariantProps<typeof dropdownVariants>;

package/src/components/dropdown/index.ts

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

package/src/components/empty/empty.styles.ts

@@ -0,0 +1,32 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const emptyVariants = tv({
+  slots: {
+    base: "empty",
+    header: "empty__header",
+    media: "empty__media",
+    title: "empty__title",
+    description: "empty__description",
+    content: "empty__content",
+    actions: "empty__actions",
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "ghost",
+  },
+  variants: {
+    size: {
+      sm: "empty--sm",
+      md: "empty--md",
+      lg: "empty--lg",
+    },
+    variant: {
+      ghost: "empty--ghost",
+      soft: "empty--soft",
+    },
+  },
+});
+
+export type EmptyVariants = VariantProps<typeof emptyVariants>;

package/src/components/empty/index.ts

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

package/src/components/empty-state/empty-state.styles.ts

@@ -0,0 +1,9 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const emptyStateVariants = tv({
+  base: "empty-state",
+});
+
+export type EmptyStateVariants = VariantProps<typeof emptyStateVariants>;

package/src/components/empty-state/index.ts

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

package/src/components/fieldset/fieldset.styles.ts

@@ -0,0 +1,15 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const fieldsetVariants = tv({
+  slots: {
+    actions: "fieldset__actions",
+    base: "fieldset",
+    description: "fieldset__description",
+    fieldGroup: "fieldset__field_group",
+    legend: "fieldset__legend",
+  },
+});
+
+export type FieldsetVariants = VariantProps<typeof fieldsetVariants>;

package/src/components/fieldset/index.ts

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

package/src/components/header/header.styles.ts

@@ -0,0 +1,5 @@
+import {tv} from "tailwind-variants";
+
+export const headerVariants = tv({
+  base: "header",
+});

package/src/components/header/index.ts

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