@auronui/styles 1.2.2 → 1.4.0

package/dist/index.js

@@ -10,6 +10,8 @@ import { buttonVariants } from "./components/button/button.styles.js";
 import { buttonGroupVariants } from "./components/button-group/button-group.styles.js";
 import { calendarVariants } from "./components/calendar/calendar.styles.js";
 import { calendarYearPickerVariants } from "./components/calendar-year-picker/calendar-year-picker.styles.js";
+import { monthRangePickerVariants } from "./components/month-range-picker/month-range-picker.styles.js";
+import { yearRangePickerVariants } from "./components/year-range-picker/year-range-picker.styles.js";
 import { rangeCalendarVariants } from "./components/range-calendar/range-calendar.styles.js";
 import { cardVariants } from "./components/card/card.styles.js";
 import { checkboxVariants } from "./components/checkbox/checkbox.styles.js";
@@ -24,6 +26,9 @@ import { colorSwatchVariants } from "./components/color-swatch/color-swatch.styl
 import { closeButtonVariants } from "./components/close-button/close-button.styles.js";
 import { colorSwatchPickerVariants } from "./components/color-swatch-picker/color-swatch-picker.styles.js";
 import { comboBoxVariants } from "./components/combo-box/combo-box.styles.js";
+import { contextMenuVariants } from "./components/context-menu/context-menu.styles.js";
+import { menubarVariants } from "./components/menubar/menubar.styles.js";
+import { navigationMenuVariants } from "./components/navigation-menu/navigation-menu.styles.js";
 import { dateInputVariants } from "./components/date-input/date-input.styles.js";
 import { datePickerVariants } from "./components/date-picker/date-picker.styles.js";
 import { dateRangeFieldVariants } from "./components/date-range-field/date-range-field.styles.js";
@@ -34,10 +39,12 @@ import { drawerVariants } from "./components/drawer/drawer.styles.js";
 import { collapsibleVariants } from "./components/collapsible/collapsible.styles.js";
 import { collapsibleGroupVariants } from "./components/collapsible-group/collapsible-group.styles.js";
 import { dropdownVariants } from "./components/dropdown/dropdown.styles.js";
+import { editableVariants } from "./components/editable/editable.styles.js";
 import { emptyStateVariants } from "./components/empty-state/empty-state.styles.js";
 import { errorMessageVariants } from "./components/error-message/error-message.styles.js";
 import { fieldsetVariants } from "./components/fieldset/fieldset.styles.js";
 import { headerVariants } from "./components/header/header.styles.js";
+import { hoverCardVariants } from "./components/hover-card/hover-card.styles.js";
 import { inputVariants } from "./components/input/input.styles.js";
 import { inputOTPVariants } from "./components/input-otp/input-otp.styles.js";
 import { kbdVariants } from "./components/kbd/kbd.styles.js";
@@ -72,6 +79,8 @@ import { tabsVariants } from "./components/tabs/tabs.styles.js";
 import { textVariants } from "./components/text/text.styles.js";
 import { textAreaVariants } from "./components/textarea/textarea.styles.js";
 import { timeFieldVariants } from "./components/time-field/time-field.styles.js";
+import { timePickerVariants } from "./components/time-picker/time-picker.styles.js";
+import { timeRangeFieldVariants } from "./components/time-range-field/time-range-field.styles.js";
 import { toastVariants } from "./components/toast/toast.styles.js";
 import { toggleButtonVariants } from "./components/toggle-button/toggle-button.styles.js";
 import { toggleButtonGroupVariants } from "./components/toggle-button-group/toggle-button-group.styles.js";
@@ -81,4 +90,4 @@ import { aspectRatioVariants } from "./components/aspect-ratio/aspect-ratio.styl
 import { splitterVariants } from "./components/splitter/splitter.styles.js";
 import { stepperVariants } from "./components/stepper/stepper.styles.js";
 import { treeVariants } from "./components/tree/tree.styles.js";
-export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, aspectRatioVariants, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, collapsibleGroupVariants, collapsibleVariants, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, dateInputVariants, datePickerVariants, dateRangeFieldVariants, dateRangePickerVariants, dateTimePickerVariants, descriptionVariants, disabledClasses, drawerVariants, dropdownVariants, emptyStateVariants, errorMessageVariants, fieldsetVariants, focusRingClasses, headerVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, meterVariants, modalVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, selectVariants, separatorVariants, skeletonVariants, sliderVariants, spinnerVariants, splitterVariants, stepperVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, textAreaVariants, textVariants, timeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, treeVariants };
+export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, aspectRatioVariants, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, collapsibleGroupVariants, collapsibleVariants, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, contextMenuVariants, dateInputVariants, datePickerVariants, dateRangeFieldVariants, dateRangePickerVariants, dateTimePickerVariants, descriptionVariants, disabledClasses, drawerVariants, dropdownVariants, editableVariants, emptyStateVariants, errorMessageVariants, fieldsetVariants, focusRingClasses, headerVariants, hoverCardVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, menubarVariants, meterVariants, modalVariants, monthRangePickerVariants, navigationMenuVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, selectVariants, separatorVariants, skeletonVariants, sliderVariants, spinnerVariants, splitterVariants, stepperVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, textAreaVariants, textVariants, timeFieldVariants, timePickerVariants, timeRangeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, treeVariants, yearRangePickerVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.2.2",
+  "version": "1.4.0",
   "description": "Auron core styles — adapted for Reka UI",
   "type": "module",
   "license": "MIT",
@@ -94,6 +94,14 @@
       "style": "./components/calendar-year-picker.css",
       "default": "./components/calendar-year-picker.css"
     },
+    "./month-range-picker.css": {
+      "style": "./components/month-range-picker.css",
+      "default": "./components/month-range-picker.css"
+    },
+    "./year-range-picker.css": {
+      "style": "./components/year-range-picker.css",
+      "default": "./components/year-range-picker.css"
+    },
     "./card.css": {
       "style": "./components/card.css",
       "default": "./components/card.css"
@@ -174,10 +182,26 @@
       "style": "./components/drawer.css",
       "default": "./components/drawer.css"
     },
+    "./context-menu.css": {
+      "style": "./components/context-menu.css",
+      "default": "./components/context-menu.css"
+    },
+    "./menubar.css": {
+      "style": "./components/menubar.css",
+      "default": "./components/menubar.css"
+    },
+    "./navigation-menu.css": {
+      "style": "./components/navigation-menu.css",
+      "default": "./components/navigation-menu.css"
+    },
     "./dropdown.css": {
       "style": "./components/dropdown.css",
       "default": "./components/dropdown.css"
     },
+    "./editable.css": {
+      "style": "./components/editable.css",
+      "default": "./components/editable.css"
+    },
     "./empty-state.css": {
       "style": "./components/empty-state.css",
       "default": "./components/empty-state.css"
@@ -194,6 +218,10 @@
       "style": "./components/header.css",
       "default": "./components/header.css"
     },
+    "./hover-card.css": {
+      "style": "./components/hover-card.css",
+      "default": "./components/hover-card.css"
+    },
     "./input.css": {
       "style": "./components/input.css",
       "default": "./components/input.css"
@@ -338,6 +366,10 @@
       "style": "./components/time-field.css",
       "default": "./components/time-field.css"
     },
+    "./time-range-field.css": {
+      "style": "./components/time-range-field.css",
+      "default": "./components/time-range-field.css"
+    },
     "./toast.css": {
       "style": "./components/toast.css",
       "default": "./components/toast.css"

package/src/components/context-menu/context-menu.styles.ts

@@ -0,0 +1,13 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const contextMenuVariants = tv({
+  slots: {
+    root: "context-menu",
+    trigger: "context-menu__trigger",
+    popover: "context-menu__popover",
+  },
+});
+
+export type ContextMenuVariants = VariantProps<typeof contextMenuVariants>;

package/src/components/context-menu/index.ts

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

package/src/components/editable/editable.styles.ts

@@ -0,0 +1,24 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const editableVariants = tv({
+  slots: {
+    /** Root container */
+    base: "editable",
+    /** Area wrapping both preview and input */
+    area: "editable__area",
+    /** Read-only text display */
+    preview: "editable__preview",
+    /** Editable text input */
+    input: "editable__input",
+    /** Edit (pencil) trigger button */
+    editTrigger: "editable__edit-trigger",
+    /** Submit (checkmark) trigger button */
+    submitTrigger: "editable__submit-trigger",
+    /** Cancel (×) trigger button */
+    cancelTrigger: "editable__cancel-trigger",
+  },
+});
+
+export type EditableVariants = VariantProps<typeof editableVariants>;

package/src/components/editable/index.ts

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

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

@@ -0,0 +1,12 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const hoverCardVariants = tv({
+  slots: {
+    base: "hover-card",
+    trigger: "hover-card__trigger",
+  },
+});
+
+export type HoverCardVariants = VariantProps<typeof hoverCardVariants>;

package/src/components/hover-card/index.ts

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

package/src/components/index.ts

@@ -10,6 +10,8 @@ export * from "./button";
 export * from "./button-group";
 export * from "./calendar";
 export * from "./calendar-year-picker";
+export * from "./month-range-picker";
+export * from "./year-range-picker";
 export * from "./range-calendar";
 export * from "./card";
 export * from "./checkbox";
@@ -24,6 +26,9 @@ export * from "./color-swatch";
 export * from "./close-button";
 export * from "./color-swatch-picker";
 export * from "./combo-box";
+export * from "./context-menu";
+export * from "./menubar";
+export * from "./navigation-menu";
 export * from "./date-input";
 export * from "./date-picker";
 export * from "./date-range-field";
@@ -34,10 +39,12 @@ export * from "./drawer";
 export * from "./collapsible";
 export * from "./collapsible-group";
 export * from "./dropdown";
+export * from "./editable";
 export * from "./empty-state";
 export * from "./error-message";
 export * from "./fieldset";
 export * from "./header";
+export * from "./hover-card";
 export * from "./input";
 export * from "./input-otp";
 export * from "./kbd";
@@ -72,6 +79,8 @@ export * from "./tabs";
 export * from "./text";
 export * from "./textarea";
 export * from "./time-field";
+export * from "./time-picker";
+export * from "./time-range-field";
 export * from "./toast";
 export * from "./toggle-button";
 export * from "./toggle-button-group";

package/src/components/menubar/index.ts

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

package/src/components/menubar/menubar.styles.ts

@@ -0,0 +1,13 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const menubarVariants = tv({
+  slots: {
+    root: "menubar",
+    trigger: "menubar__trigger",
+    popover: "menubar__popover",
+  },
+});
+
+export type MenubarVariants = VariantProps<typeof menubarVariants>;

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

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

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

@@ -0,0 +1,30 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const monthRangePickerVariants = tv({
+  defaultVariants: {},
+  slots: {
+    /** Root month range picker container */
+    base: "month-range-picker",
+    /** Header containing heading and navigation */
+    header: "month-range-picker__header",
+    /** Previous/Next navigation button */
+    navButton: "month-range-picker__nav-button",
+    /** Navigation button icon */
+    navButtonIcon: "month-range-picker__nav-button-icon",
+    /** Heading text */
+    heading: "month-range-picker__heading",
+    /** Grid (table) */
+    grid: "month-range-picker__grid",
+    /** Grid body (tbody) */
+    gridBody: "month-range-picker__grid-body",
+    /** Grid row (tr) */
+    gridRow: "month-range-picker__grid-row",
+    /** Month cell (button per month) */
+    cell: "month-range-picker__cell",
+  },
+  variants: {},
+});
+
+export type MonthRangePickerVariants = VariantProps<typeof monthRangePickerVariants>;

package/src/components/navigation-menu/index.ts

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

package/src/components/navigation-menu/navigation-menu.styles.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from "../../utils";
+
+import { tv } from "tailwind-variants";
+
+export const navigationMenuVariants = tv({
+  slots: {
+    root: "navigation-menu",
+    list: "navigation-menu__list",
+    trigger: "navigation-menu__trigger",
+    chevron: "navigation-menu__chevron",
+    content: "navigation-menu__content",
+    viewportWrapper: "navigation-menu__viewport-wrapper",
+    viewport: "navigation-menu__viewport",
+    indicator: "navigation-menu__indicator",
+    indicatorArrow: "navigation-menu__indicator-arrow",
+  },
+});
+
+export type NavigationMenuVariants = VariantProps<typeof navigationMenuVariants>;

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

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

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

@@ -0,0 +1,35 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const timePickerVariants = tv({
+  slots: {
+    base: "time-picker",
+    popover: "time-picker__popover",
+    trigger: "time-picker__trigger",
+    triggerIndicator: "time-picker__trigger-indicator",
+    panel: "time-picker__panel",
+    timeDone: "time-picker__time-done",
+  },
+  defaultVariants: {
+    isInvalid: false,
+    isDisabled: false,
+    fullWidth: false,
+  },
+  variants: {
+    isInvalid: {
+      true: {base: "time-picker--invalid"},
+      false: {},
+    },
+    isDisabled: {
+      true: {base: "time-picker--disabled"},
+      false: {},
+    },
+    fullWidth: {
+      true: {base: "time-picker--full-width"},
+      false: {},
+    },
+  },
+});
+
+export type TimePickerVariants = VariantProps<typeof timePickerVariants>;

package/src/components/time-range-field/index.ts

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

package/src/components/time-range-field/time-range-field.styles.ts

@@ -0,0 +1,87 @@
+import type {VariantProps} from "../../utils";
+
+import { tv } from "tailwind-variants";
+
+export const timeRangeFieldVariants = tv({
+  slots: {
+    base: "time-range-field-root",
+    mainWrapper: "time-range-field__main-wrapper",
+    inputWrapper: "time-range-field",
+    segmentList: "time-range-field__segment-list",
+    segment: "time-range-field__segment",
+    separator: "time-range-field__separator",
+    startContent: "time-range-field__start-content",
+    endContent: "time-range-field__end-content",
+    label: "time-range-field__label",
+    helperWrapper: "time-range-field__helper-wrapper",
+    description: "time-range-field__description",
+    errorMessage: "time-range-field__error-message",
+  },
+  defaultVariants: {
+    variant: "flat",
+    size: "md",
+    color: "default",
+    fullWidth: false,
+    isInvalid: false,
+    isDisabled: false,
+    isReadonly: false,
+    hasLabel: false,
+    labelPlacement: "inside",
+  },
+  variants: {
+    variant: {
+      flat:       { inputWrapper: "time-range-field--flat" },
+      bordered:   { inputWrapper: "time-range-field--bordered" },
+      faded:      { inputWrapper: "time-range-field--faded" },
+      underlined: { inputWrapper: "time-range-field--underlined" },
+      raised:     { inputWrapper: "time-range-field--raised" },
+    },
+    size: {
+      sm: { inputWrapper: "time-range-field--sm" },
+      md: {},
+      lg: { inputWrapper: "time-range-field--lg" },
+    },
+    color: {
+      default:   { inputWrapper: "time-range-field--default" },
+      primary:   { inputWrapper: "time-range-field--primary" },
+      secondary: { inputWrapper: "time-range-field--secondary" },
+      success:   { inputWrapper: "time-range-field--success" },
+      warning:   { inputWrapper: "time-range-field--warning" },
+      danger:    { inputWrapper: "time-range-field--danger" },
+    },
+    fullWidth: {
+      false: {},
+      true:  { base: "time-range-field-root--full-width", inputWrapper: "time-range-field--full-width" },
+    },
+    isInvalid: {
+      false: {},
+      true:  { base: "time-range-field-root--invalid", inputWrapper: "time-range-field--invalid" },
+    },
+    isDisabled: {
+      false: {},
+      true:  { base: "time-range-field-root--disabled", inputWrapper: "time-range-field--disabled" },
+    },
+    isReadonly: {
+      false: {},
+      true:  { inputWrapper: "time-range-field--readonly" },
+    },
+    hasLabel: {
+      false: {},
+      true:  {},
+    },
+    labelPlacement: {
+      inside:         { base: "time-range-field-root--label-inside" },
+      outside:        { base: "time-range-field-root--label-outside" },
+      "outside-left": { base: "time-range-field-root--label-outside-left" },
+    },
+  },
+  compoundVariants: [
+    {
+      hasLabel: true,
+      labelPlacement: "inside",
+      class: { inputWrapper: "time-range-field--label-inside" },
+    },
+  ],
+});
+
+export type TimeRangeFieldVariants = VariantProps<typeof timeRangeFieldVariants>;

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

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

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

@@ -0,0 +1,30 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const yearRangePickerVariants = tv({
+  defaultVariants: {},
+  slots: {
+    /** Root year range picker container */
+    base: "year-range-picker",
+    /** Header containing heading and navigation */
+    header: "year-range-picker__header",
+    /** Previous/Next navigation button */
+    navButton: "year-range-picker__nav-button",
+    /** Navigation button icon */
+    navButtonIcon: "year-range-picker__nav-button-icon",
+    /** Heading text */
+    heading: "year-range-picker__heading",
+    /** Grid (table) */
+    grid: "year-range-picker__grid",
+    /** Grid body (tbody) */
+    gridBody: "year-range-picker__grid-body",
+    /** Grid row (tr) */
+    gridRow: "year-range-picker__grid-row",
+    /** Year cell (button per year) */
+    cell: "year-range-picker__cell",
+  },
+  variants: {},
+});
+
+export type YearRangePickerVariants = VariantProps<typeof yearRangePickerVariants>;