@arobo/styles 1.0.1

package/src/components/calendar/calendar.styles.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const calendarVariants = tv({
+  base: "calendar",
+  slots: {
+    cell: "calendar__cell",
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+  variants: {
+    variant: {
+      primary: "calendar--primary",
+      secondary: "calendar--secondary",
+    },
+    size: {
+      sm: "calendar--sm",
+      md: "calendar--md",
+      lg: "calendar--lg",
+    },
+  },
+});
+
+export type CalendarVariants = VariantProps<typeof calendarVariants>;

package/src/components/calendar/index.ts

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

package/src/components/card/card.styles.ts

@@ -0,0 +1,36 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+const cardVariants = tv({
+  defaultVariants: {
+    variant: "default",
+  },
+  slots: {
+    base: "card",
+    content: "card__content",
+    description: "card__description",
+    footer: "card__footer",
+    header: "card__header",
+    title: "card__title",
+  },
+  variants: {
+    variant: {
+      default: {
+        base: "card--default",
+      },
+      secondary: {
+        base: "card--secondary",
+      },
+      tertiary: {
+        base: "card--tertiary",
+      },
+      transparent: {
+        base: "card--transparent",
+      },
+    },
+  },
+});
+
+export {cardVariants};
+export type CardVariants = VariantProps<typeof cardVariants>;

package/src/components/card/index.ts

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

package/src/components/checkbox/checkbox.styles.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const checkboxVariants = tv({
+  defaultVariants: {
+    variant: "primary",
+  },
+  slots: {
+    base: "checkbox",
+    content: "checkbox__content",
+    control: "checkbox__control",
+    indicator: "checkbox__indicator",
+  },
+  variants: {
+    variant: {
+      primary: {
+        base: "checkbox--primary",
+      },
+      secondary: {
+        base: "checkbox--secondary",
+      },
+    },
+  },
+});
+
+export type CheckboxVariants = VariantProps<typeof checkboxVariants>;

package/src/components/checkbox/index.ts

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

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

@@ -0,0 +1,24 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const checkboxGroupVariants = tv({
+  base: "checkbox-group",
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+  variants: {
+    variant: {
+      primary: "checkbox-group--primary",
+      secondary: "checkbox-group--secondary",
+    },
+    size: {
+      sm: "checkbox-group--sm",
+      md: "checkbox-group--md",
+      lg: "checkbox-group--lg",
+    },
+  },
+});
+
+export type CheckboxGroupVariants = VariantProps<typeof checkboxGroupVariants>;

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

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

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

@@ -0,0 +1,17 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const closeButtonVariants = tv({
+  base: "close-button",
+  defaultVariants: {
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      default: "close-button--default",
+    },
+  },
+});
+
+export type CloseButtonVariants = VariantProps<typeof closeButtonVariants>;

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

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

package/src/components/combobox/combobox.styles.ts

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

package/src/components/combobox/index.ts

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

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

@@ -0,0 +1,18 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const dateFieldVariants = tv({
+  base: "date-field",
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "date-field--full-width",
+    },
+  },
+});
+
+export type DateFieldVariants = VariantProps<typeof dateFieldVariants>;

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

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

package/src/components/date-input-group/date-input-group.styles.ts

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

package/src/components/date-input-group/index.ts

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

package/src/components/date-picker/date-picker.styles.ts

@@ -0,0 +1,13 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const datePickerVariants = tv({
+  base: "date-picker",
+  slots: {
+    trigger: "date-picker__trigger",
+    input: "date-picker__input",
+  },
+});
+
+export type DatePickerVariants = VariantProps<typeof datePickerVariants>;

package/src/components/date-picker/index.ts

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

package/src/components/date-range-picker/date-range-picker.styles.ts

@@ -0,0 +1,32 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const dateRangePickerVariants = tv({
+  base: "date-range-picker",
+  slots: {
+    trigger: "date-range-picker__trigger",
+    inputGroup: "date-range-picker__input-group",
+    input: "date-range-picker__input",
+    separator: "date-range-picker__separator",
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+  variants: {
+    variant: {
+      primary: "date-range-picker--primary",
+      secondary: "date-range-picker--secondary",
+    },
+    size: {
+      sm: "date-range-picker--sm",
+      md: "date-range-picker--md",
+      lg: "date-range-picker--lg",
+    },
+  },
+});
+
+export type DateRangePickerVariants = VariantProps<
+  typeof dateRangePickerVariants
+>;

package/src/components/date-range-picker/index.ts

@@ -0,0 +1 @@
+export * from "./date-range-picker.styles";

package/src/components/description/description.styles.ts

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

package/src/components/description/index.ts

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

package/src/components/error-message/error-message.styles.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const errorMessageVariants = tv({
+  base: "error-message",
+});
+
+export type ErrorMessageVariants = VariantProps<typeof errorMessageVariants>;

package/src/components/error-message/index.ts

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

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

@@ -0,0 +1,9 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const fieldErrorVariants = tv({
+  base: "field-error",
+});
+
+export type FieldErrorVariants = VariantProps<typeof fieldErrorVariants>;

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

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

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

@@ -0,0 +1,29 @@
+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

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

package/src/components/index.ts

@@ -0,0 +1,23 @@
+export * from "./button";
+export * from "./button-group";
+export * from "./calendar";
+export * from "./card";
+export * from "./checkbox";
+export * from "./checkbox-group";
+export * from "./close-button";
+export * from "./combobox";
+export * from "./date-field";
+export * from "./date-input-group";
+export * from "./date-picker";
+export * from "./date-range-picker";
+export * from "./description";
+export * from "./error-message";
+export * from "./field-error";
+export * from "./field-group";
+export * from "./input";
+export * from "./label";
+export * from "./popover";
+export * from "./range-calendar";
+export * from "./surface";
+
+export * from "./text-field";

package/src/components/input/index.ts

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

package/src/components/input/input.styles.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const inputVariants = tv({
+  base: "input",
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "input--full-width",
+    },
+    variant: {
+      primary: "input--primary",
+      secondary: "input--secondary",
+    },
+  },
+});
+
+export type InputVariants = VariantProps<typeof inputVariants>;

package/src/components/label/index.ts

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

package/src/components/label/label.styles.ts

@@ -0,0 +1,25 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const labelVariants = tv({
+  base: "label",
+  defaultVariants: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+  },
+  variants: {
+    isDisabled: {
+      true: "label--disabled",
+    },
+    isInvalid: {
+      true: "label--invalid",
+    },
+    isRequired: {
+      true: "label--required",
+    },
+  },
+});
+
+export type LabelVariants = VariantProps<typeof labelVariants>;

package/src/components/popover/index.ts

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

package/src/components/popover/popover.styles.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const popoverVariants = tv({
+  slots: {
+    base: "popover",
+    dialog: "popover__dialog",
+    heading: "popover__heading",
+    trigger: "popover__trigger",
+  },
+});
+
+export type PopoverVariants = VariantProps<typeof popoverVariants>;

package/src/components/range-calendar/index.ts

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

package/src/components/range-calendar/range-calendar.styles.ts

@@ -0,0 +1,28 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const rangeCalendarVariants = tv({
+  base: "range-calendar",
+  slots: {
+    cell: "range-calendar__cell",
+    grid: "range-calendar__grid",
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+  variants: {
+    variant: {
+      primary: "range-calendar--primary",
+      secondary: "range-calendar--secondary",
+    },
+    size: {
+      sm: "range-calendar--sm",
+      md: "range-calendar--md",
+      lg: "range-calendar--lg",
+    },
+  },
+});
+
+export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>;

package/src/components/surface/index.ts

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

package/src/components/surface/surface.styles.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const surfaceVariants = tv({
+  base: "surface",
+  defaultVariants: {
+    variant: "default",
+    effect: "none",
+  },
+  variants: {
+    effect: {
+      none: "",
+      liquid: "surface--liquid",
+    },
+    variant: {
+      default: "surface--default",
+      secondary: "surface--secondary",
+      tertiary: "surface--tertiary",
+      transparent: "surface--transparent",
+    },
+  },
+  compoundVariants: [
+    {
+      effect: "liquid",
+      variant: "transparent",
+      class: "surface--liquid-transparent",
+    },
+    {
+      effect: "liquid",
+      variant: "default",
+      class: "surface--liquid-default",
+    },
+  ],
+});
+
+export type SurfaceVariants = VariantProps<typeof surfaceVariants>;

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

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

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

@@ -0,0 +1,18 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const textFieldVariants = tv({
+  base: "text-field",
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "text-field--full-width",
+    },
+  },
+});
+
+export type TextFieldVariants = VariantProps<typeof textFieldVariants>;

package/src/index.ts

@@ -0,0 +1,4 @@
+export { tv, cn, type VariantProps } from "tailwind-variants";
+
+export * from "./components";
+export * from "./utils";

package/src/utils/index.ts

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

package/src/utils/state.ts

@@ -0,0 +1,11 @@
+import { tv } from "tailwind-variants";
+
+export const focusRing = tv({
+  base: "focus-ring",
+  variants: {
+    isFocusVisible: {
+      false: "",
+      true: "outline-2",
+    },
+  },
+});