@duskmoon-dev/components 0.1.2 → 0.2.1

package/README.md

@@ -17,6 +17,7 @@ bun add @duskmoon-dev/components
 ## Usage
 
 ```tsx
+import "@duskmoon-dev/components/styles.css";
 import { Button } from "@duskmoon-dev/components/button";
 
 export default function MyComponent() {

package/dist/classes/app.d.ts

@@ -1,9 +1,9 @@
 export declare const appClass = "app";
 export declare const appRootClass = "app-root";
 export declare const appHolderClass = "app-holder";
-export declare function getAppClasses({ className, }: {
+export declare function getAppClasses({ className }: {
     className?: string;
 }): string;
-export declare function getAppRootClasses({ className, }: {
+export declare function getAppRootClasses({ className }: {
     className?: string;
 }): string;

package/dist/classes/auto-complete.d.ts

@@ -1,4 +1,4 @@
-import type { AutoCompleteSize } from "../components/auto-complete/AutoComplete.types";
+import type { AutoCompleteColor, AutoCompleteSize } from "../components/auto-complete/AutoComplete.types";
 export declare const autoCompleteBaseClass = "autocomplete";
 export declare const autoCompleteInputWrapperClass = "autocomplete-input-wrapper";
 export declare const autoCompleteInputClass = "autocomplete-input";
@@ -12,8 +12,10 @@ export declare const autoCompleteOptionFocusedClass = "autocomplete-option-focus
 export declare const autoCompleteOptionDisabledClass = "autocomplete-option-disabled";
 export declare const autoCompleteClearClass = "autocomplete-clear";
 export declare const autoCompleteNoOptionsClass = "autocomplete-no-options";
+export declare const autoCompleteColorClasses: Record<AutoCompleteColor, string>;
 export declare const autoCompleteSizeClasses: Record<AutoCompleteSize, string>;
-export declare function getAutoCompleteClasses({ disabled, open, className, }: {
+export declare function getAutoCompleteClasses({ color, disabled, open, className, }: {
+    color?: AutoCompleteColor;
     disabled?: boolean;
     open?: boolean;
     className?: string;

package/dist/classes/checkbox.d.ts

@@ -1,20 +1,24 @@
 import type { CheckboxColor, CheckboxLabelPosition, CheckboxSize } from "../components/checkbox/Checkbox.types";
-export declare const checkboxBaseClass = "checkbox";
+export declare const checkboxBaseClass = "checkbox-wrapper";
+export declare const checkboxInputBaseClass = "checkbox";
 export declare const checkboxInputClass = "checkbox-input";
 export declare const checkboxBoxBaseClass = "checkbox-box";
 export declare const checkboxCheckmarkClass = "checkbox-checkmark";
-export declare const checkboxLabelBaseClass = "checkbox-label";
+export declare const checkboxLabelBaseClass = "checkbox-text";
 export declare const checkboxColorClasses: Record<CheckboxColor, string>;
 export declare const checkboxSizeClasses: Record<CheckboxSize, string>;
 export declare const checkboxLabelPositionClasses: Record<CheckboxLabelPosition, string>;
 export declare const checkboxErrorClass = "checkbox-error";
 export declare const checkboxLoadingClass = "checkbox-loading";
-export declare function getCheckboxClasses({ size, error, loading, className, }: {
-    size?: CheckboxSize;
-    error?: boolean;
+export declare function getCheckboxClasses({ loading, className, }: {
     loading?: boolean;
     className?: string;
 }): string;
+export declare function getCheckboxInputClasses({ color, size, error, }: {
+    color?: CheckboxColor;
+    size?: CheckboxSize;
+    error?: boolean;
+}): string;
 export declare function getCheckboxBoxClasses({ color, }: {
     color?: CheckboxColor;
 }): string;

package/dist/classes/color-picker.d.ts

@@ -2,8 +2,9 @@ import type { ColorPickerFormat, ColorPickerSize, ColorPickerTrigger } from "../
 export declare const colorPickerBaseClass = "color-picker";
 export declare const colorPickerSwatchClass = "color-picker-swatch";
 export declare const colorPickerTextClass = "color-picker-text";
-export declare const colorPickerPanelClass = "color-picker-panel popover popover-show";
+export declare const colorPickerPanelClass = "color-picker-panel popover popover-bottom popover-show";
 export declare const colorPickerInputClass = "color-picker-input input";
+export declare const colorPickerFormatSelectClass = "color-picker-format-select select select-sm";
 export declare const colorPickerPresetsClass = "color-picker-presets";
 export declare const colorPickerPresetClass = "color-picker-preset";
 export declare const colorPickerPresetLabelClass = "color-picker-preset-label";

package/dist/classes/dm-drawer.d.ts

@@ -1,6 +1,6 @@
 export declare const dmDrawerBaseClass = "dm-drawer";
 export declare const dmDrawerFooterActionClass = "dm-drawer-footer-action";
-export declare function getDmDrawerClasses({ className, }: {
+export declare function getDmDrawerClasses({ className }: {
     className?: string;
 }): string;
 export declare function getDmDrawerFooterClasses({ align, className, }: {

package/dist/classes/dm-toolbar.d.ts

@@ -3,7 +3,7 @@ export declare const dmToolbarItemClass = "dm-toolbar-item";
 export declare const dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
 export declare const dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
 export declare const dmToolbarMoreClass = "dm-toolbar-more";
-export declare function getDmToolbarClasses({ className, }: {
+export declare function getDmToolbarClasses({ className }: {
     className?: string;
 }): string;
 export declare function getDmToolbarItemClasses({ primary, className, }: {

package/dist/classes/index.d.ts

@@ -32,7 +32,6 @@ export * from "./dm-infinite-scroll";
 export * from "./dm-page-header";
 export * from "./dm-pagination";
 export * from "./dm-pro-table";
-export * from "./dm-pro-table-inner";
 export * from "./dm-provider";
 export * from "./dm-query";
 export * from "./dm-search";

package/dist/classes/index.js

@@ -11,9 +11,9 @@ var alertColorClasses = {
   error: "alert-error"
 };
 var alertAppearanceClasses = {
-  filled: "",
-  outline: "alert-outline",
-  tonal: "alert-tonal"
+  filled: "alert-filled",
+  outline: "alert-outlined",
+  tonal: ""
 };
 function getAlertClasses({
   color = "info",
@@ -59,14 +59,10 @@ function getAnchorLinkClasses({
 var appClass = "app";
 var appRootClass = "app-root";
 var appHolderClass = "app-holder";
-function getAppClasses({
-  className
-}) {
+function getAppClasses({ className }) {
   return cn(appClass, className);
 }
-function getAppRootClasses({
-  className
-}) {
+function getAppRootClasses({ className }) {
   return cn(appRootClass, className);
 }
 // src/classes/auto-complete.ts
@@ -83,17 +79,27 @@ var autoCompleteOptionFocusedClass = "autocomplete-option-focused";
 var autoCompleteOptionDisabledClass = "autocomplete-option-disabled";
 var autoCompleteClearClass = "autocomplete-clear";
 var autoCompleteNoOptionsClass = "autocomplete-no-options";
+var autoCompleteColorClasses = {
+  primary: "autocomplete-primary",
+  secondary: "autocomplete-secondary",
+  tertiary: "autocomplete-tertiary",
+  info: "autocomplete-info",
+  success: "autocomplete-success",
+  warning: "autocomplete-warning",
+  error: "autocomplete-error"
+};
 var autoCompleteSizeClasses = {
   sm: "autocomplete-sm",
   md: "",
   lg: "autocomplete-lg"
 };
 function getAutoCompleteClasses({
+  color,
   disabled,
   open,
   className
 }) {
-  return cn(autoCompleteBaseClass, disabled && "autocomplete-disabled", open && "autocomplete-open", className);
+  return cn(autoCompleteBaseClass, color && autoCompleteColorClasses[color], disabled && "autocomplete-disabled", open && "autocomplete-open", className);
 }
 function getAutoCompleteInputClasses({
   size = "md",
@@ -385,11 +391,12 @@ function getCascaderOptionClasses({
   return cn(cascaderOptionClass, active && cascaderOptionActiveClass, selected && cascaderOptionSelectedClass, disabled && cascaderOptionDisabledClass, loading && cascaderOptionLoadingClass, expand && cascaderOptionExpandClass, className);
 }
 // src/classes/checkbox.ts
-var checkboxBaseClass = "checkbox";
+var checkboxBaseClass = "checkbox-wrapper";
+var checkboxInputBaseClass = "checkbox";
 var checkboxInputClass = "checkbox-input";
 var checkboxBoxBaseClass = "checkbox-box";
 var checkboxCheckmarkClass = "checkbox-checkmark";
-var checkboxLabelBaseClass = "checkbox-label";
+var checkboxLabelBaseClass = "checkbox-text";
 var checkboxColorClasses = {
   primary: "checkbox-primary",
   secondary: "checkbox-secondary",
@@ -407,12 +414,17 @@ var checkboxLabelPositionClasses = {
 var checkboxErrorClass = "checkbox-error";
 var checkboxLoadingClass = "checkbox-loading";
 function getCheckboxClasses({
-  size = "md",
-  error,
   loading,
   className
 }) {
-  return cn(checkboxBaseClass, checkboxSizeClasses[size], error && checkboxErrorClass, loading && checkboxLoadingClass, className);
+  return cn("checkbox-label", checkboxBaseClass, loading && checkboxLoadingClass, className);
+}
+function getCheckboxInputClasses({
+  color = "primary",
+  size = "md",
+  error
+}) {
+  return cn(checkboxInputBaseClass, checkboxInputClass, checkboxColorClasses[color], checkboxSizeClasses[size], error && checkboxErrorClass);
 }
 function getCheckboxBoxClasses({
   color = "primary"
@@ -472,8 +484,9 @@ function getConfigProviderClasses({
 var colorPickerBaseClass = "color-picker";
 var colorPickerSwatchClass = "color-picker-swatch";
 var colorPickerTextClass = "color-picker-text";
-var colorPickerPanelClass = "color-picker-panel popover popover-show";
+var colorPickerPanelClass = "color-picker-panel popover popover-bottom popover-show";
 var colorPickerInputClass = "color-picker-input input";
+var colorPickerFormatSelectClass = "color-picker-format-select select select-sm";
 var colorPickerPresetsClass = "color-picker-presets";
 var colorPickerPresetClass = "color-picker-preset";
 var colorPickerPresetLabelClass = "color-picker-preset-label";
@@ -675,9 +688,7 @@ function getDmBreadcrumbClasses({
 // src/classes/dm-drawer.ts
 var dmDrawerBaseClass = "dm-drawer";
 var dmDrawerFooterActionClass = "dm-drawer-footer-action";
-function getDmDrawerClasses({
-  className
-}) {
+function getDmDrawerClasses({ className }) {
   return cn(dmDrawerBaseClass, className);
 }
 function getDmDrawerFooterClasses({
@@ -792,20 +803,6 @@ var dmProTableColumnSettingClass = "dm-pro-table-column-setting";
 function getDmProTableClasses({ className }) {
   return cn(dmProTableBaseClass, className);
 }
-// src/classes/dm-table.ts
-var dmTableBaseClass = "dm-table";
-var dmTableSearchClass = "dm-table-search";
-var dmTableCardClass = "dm-table-card";
-var dmTableHeaderClass = "dm-table-header";
-var dmTableTitleClass = "dm-table-title";
-var dmTableExtraClass = "dm-table-extra";
-var dmTableIndicatorsClass = "dm-table-indicators";
-var dmTableTableExtraClass = "dm-table-table-extra";
-var dmTableColumnSettingClass = "dm-table-column-setting";
-var dmTablePaginationClass = "dm-table-pagination";
-function getDmTableClasses({ className }) {
-  return cn(dmTableBaseClass, className);
-}
 // src/classes/dm-provider.ts
 var dmProviderClass = "dm-provider";
 function getDmProviderClasses({ className }) {
@@ -879,15 +876,27 @@ function getDmTabsClasses({
   const isVerticalLine = type === "line" && (tabPosition === "left" || tabPosition === "right");
   return cn(type === "line" && (isVerticalLine ? dmTabsLineVerticalClass : dmTabsLineHorizontalClass), type !== "line" && (transparentCard ? dmTabsCardTransparentClass : dmTabsCardClass), optionTree && dmTabsOptionTreeClass, className);
 }
+// src/classes/dm-table.ts
+var dmTableBaseClass = "dm-table";
+var dmTableSearchClass = "dm-table-search";
+var dmTableCardClass = "dm-table-card";
+var dmTableHeaderClass = "dm-table-header";
+var dmTableTitleClass = "dm-table-title";
+var dmTableExtraClass = "dm-table-extra";
+var dmTableIndicatorsClass = "dm-table-indicators";
+var dmTableTableExtraClass = "dm-table-table-extra";
+var dmTableColumnSettingClass = "dm-table-column-setting";
+var dmTablePaginationClass = "dm-table-pagination";
+function getDmTableClasses({ className }) {
+  return cn(dmTableBaseClass, className);
+}
 // src/classes/dm-toolbar.ts
 var dmToolbarBaseClass = "dm-toolbar";
 var dmToolbarItemClass = "dm-toolbar-item";
 var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
 var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
 var dmToolbarMoreClass = "dm-toolbar-more";
-function getDmToolbarClasses({
-  className
-}) {
+function getDmToolbarClasses({ className }) {
   return cn(dmToolbarBaseClass, className);
 }
 function getDmToolbarItemClasses({
@@ -3152,7 +3161,6 @@ export {
   getDmSearchClasses,
   getDmSearchClasses as getDmQueryClasses,
   getDmProviderClasses,
-  getDmTableClasses as getDmProTableInnerClasses,
   getDmProTableClasses,
   getDmPaginationRefreshClasses,
   getDmPaginationClasses,
@@ -3176,6 +3184,7 @@ export {
   getCollapseGroupClasses,
   getColClasses,
   getCheckboxLabelClasses,
+  getCheckboxInputClasses,
   getCheckboxClasses,
   getCheckboxBoxClasses,
   getCheckableTagClasses,
@@ -3320,7 +3329,6 @@ export {
   dmProviderClass,
   dmProTableToolbarClass,
   dmProTableTitleClass,
-  dmTableBaseClass as dmProTableInnerBaseClass,
   dmProTableHeaderClass,
   dmProTableColumnSettingClass,
   dmProTableBaseClass,
@@ -3423,6 +3431,7 @@ export {
   colorPickerPresetClass,
   colorPickerPanelClass,
   colorPickerInputClass,
+  colorPickerFormatSelectClass,
   colorPickerFormatClasses,
   colorPickerBaseClass,
   collapseTriggerClass,
@@ -3442,6 +3451,7 @@ export {
   checkboxLabelPositionClasses,
   checkboxLabelBaseClass,
   checkboxInputClass,
+  checkboxInputBaseClass,
   checkboxErrorClass,
   checkboxColorClasses,
   checkboxCheckmarkClass,
@@ -3535,6 +3545,7 @@ export {
   autoCompleteInputClass,
   autoCompleteDropdownOpenClass,
   autoCompleteDropdownClass,
+  autoCompleteColorClasses,
   autoCompleteClearClass,
   autoCompleteBaseClass,
   appRootClass,

package/dist/components/alert/index.js

@@ -37,9 +37,9 @@ var alertColorClasses = {
   error: "alert-error"
 };
 var alertAppearanceClasses = {
-  filled: "",
-  outline: "alert-outline",
-  tonal: "alert-tonal"
+  filled: "alert-filled",
+  outline: "alert-outlined",
+  tonal: ""
 };
 function getAlertClasses({
   color = "info",

package/dist/components/app/index.js

@@ -785,14 +785,10 @@ import {
 var appClass = "app";
 var appRootClass = "app-root";
 var appHolderClass = "app-holder";
-function getAppClasses({
-  className
-}) {
+function getAppClasses({ className }) {
   return cn(appClass, className);
 }
-function getAppRootClasses({
-  className
-}) {
+function getAppRootClasses({ className }) {
   return cn(appRootClass, className);
 }
 
@@ -874,10 +870,7 @@ AppBase.displayName = "App";
 var App = AppBase;
 App.Context = AppContext;
 App.useApp = () => useContext(AppContext);
-function AppRoot({
-  className,
-  ...props
-}) {
+function AppRoot({ className, ...props }) {
   return /* @__PURE__ */ jsx4("div", {
     ...props,
     className: getAppRootClasses({ className })

package/dist/components/auto-complete/AutoComplete.types.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
 export type AutoCompleteSize = "sm" | "md" | "lg";
+export type AutoCompleteColor = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
 export interface AutoCompleteOptionType {
     value: string;
     label?: ReactNode;
@@ -10,6 +11,7 @@ export type AutoCompleteFilterOption = boolean | ((inputValue: string, option: A
 export interface AutoCompleteProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSelect"> {
     allowClear?: boolean;
     children?: ReactNode;
+    color?: AutoCompleteColor;
     defaultOpen?: boolean;
     defaultValue?: string;
     disabled?: boolean;

package/dist/components/auto-complete/index.js

@@ -1,13 +1,7 @@
 "use client";
 
 // src/components/auto-complete/AutoComplete.tsx
-import React, {
-  forwardRef,
-  useId,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import React, { forwardRef, useId, useMemo, useRef, useState } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -48,17 +42,27 @@ var autoCompleteOptionFocusedClass = "autocomplete-option-focused";
 var autoCompleteOptionDisabledClass = "autocomplete-option-disabled";
 var autoCompleteClearClass = "autocomplete-clear";
 var autoCompleteNoOptionsClass = "autocomplete-no-options";
+var autoCompleteColorClasses = {
+  primary: "autocomplete-primary",
+  secondary: "autocomplete-secondary",
+  tertiary: "autocomplete-tertiary",
+  info: "autocomplete-info",
+  success: "autocomplete-success",
+  warning: "autocomplete-warning",
+  error: "autocomplete-error"
+};
 var autoCompleteSizeClasses = {
   sm: "autocomplete-sm",
   md: "",
   lg: "autocomplete-lg"
 };
 function getAutoCompleteClasses({
+  color,
   disabled,
   open,
   className
 }) {
-  return cn(autoCompleteBaseClass, disabled && "autocomplete-disabled", open && "autocomplete-open", className);
+  return cn(autoCompleteBaseClass, color && autoCompleteColorClasses[color], disabled && "autocomplete-disabled", open && "autocomplete-open", className);
 }
 function getAutoCompleteInputClasses({
   size = "md",
@@ -129,6 +133,7 @@ var AutoCompleteRoot = forwardRef(({
   allowClear,
   children,
   className,
+  color,
   defaultOpen,
   defaultValue = "",
   disabled,
@@ -266,6 +271,7 @@ var AutoCompleteRoot = forwardRef(({
     ...props,
     ref,
     className: getAutoCompleteClasses({
+      color,
       disabled,
       open: isOpen,
       className

package/dist/components/cascader/index.js

@@ -262,7 +262,16 @@ function CascaderMenus({
     })
   });
 }
-var CascaderPanel = forwardRef(({ className, options = [], fieldNames, value, defaultValue, onChange, onSelect, ...props }, ref) => {
+var CascaderPanel = forwardRef(({
+  className,
+  options = [],
+  fieldNames,
+  value,
+  defaultValue,
+  onChange,
+  onSelect,
+  ...props
+}, ref) => {
   const names = useMemo(() => normalizeFieldNames(fieldNames), [fieldNames]);
   const [activeValue, setActiveValue] = useState(normalizeSingleValue(value ?? defaultValue));
   const [internalValue, setInternalValue] = useState(defaultValue);

package/dist/components/checkbox/index.js

@@ -34,11 +34,10 @@ function cn(...inputs) {
   return clsx(inputs);
 }
 // src/classes/checkbox.ts
-var checkboxBaseClass = "checkbox";
+var checkboxBaseClass = "checkbox-wrapper";
+var checkboxInputBaseClass = "checkbox";
 var checkboxInputClass = "checkbox-input";
-var checkboxBoxBaseClass = "checkbox-box";
-var checkboxCheckmarkClass = "checkbox-checkmark";
-var checkboxLabelBaseClass = "checkbox-label";
+var checkboxLabelBaseClass = "checkbox-text";
 var checkboxColorClasses = {
   primary: "checkbox-primary",
   secondary: "checkbox-secondary",
@@ -56,17 +55,17 @@ var checkboxLabelPositionClasses = {
 var checkboxErrorClass = "checkbox-error";
 var checkboxLoadingClass = "checkbox-loading";
 function getCheckboxClasses({
-  size = "md",
-  error,
   loading,
   className
 }) {
-  return cn(checkboxBaseClass, checkboxSizeClasses[size], error && checkboxErrorClass, loading && checkboxLoadingClass, className);
+  return cn("checkbox-label", checkboxBaseClass, loading && checkboxLoadingClass, className);
 }
-function getCheckboxBoxClasses({
-  color = "primary"
+function getCheckboxInputClasses({
+  color = "primary",
+  size = "md",
+  error
 }) {
-  return cn(checkboxBoxBaseClass, checkboxColorClasses[color]);
+  return cn(checkboxInputBaseClass, checkboxInputClass, checkboxColorClasses[color], checkboxSizeClasses[size], error && checkboxErrorClass);
 }
 function getCheckboxLabelClasses({
   labelPosition = "right"
@@ -99,8 +98,6 @@ var Checkbox = forwardRef(({
   const isDisabled = disabled || loading;
   return /* @__PURE__ */ jsxs("label", {
     className: getCheckboxClasses({
-      size,
-      error,
       loading,
       className
     }),
@@ -109,18 +106,10 @@ var Checkbox = forwardRef(({
         ...props,
         ref: inputRef,
         type: "checkbox",
-        className: checkboxInputClass,
+        className: getCheckboxInputClasses({ color, size, error }),
         disabled: isDisabled,
         "aria-checked": indeterminate ? "mixed" : ariaChecked
       }),
-      /* @__PURE__ */ jsx("span", {
-        className: getCheckboxBoxClasses({ color }),
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx("span", {
-          className: checkboxCheckmarkClass,
-          children: indeterminate ? "-" : "✓"
-        })
-      }),
       children ? /* @__PURE__ */ jsx("span", {
         className: getCheckboxLabelClasses({ labelPosition }),
         children

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

@@ -1,2 +1,2 @@
 export { Col } from "./Col";
-export type { ColProps, ColResponsiveValue, ColSpan, } from "./Col.types";
+export type { ColProps, ColResponsiveValue, ColSpan } from "./Col.types";

package/dist/components/collapse/index.js

@@ -135,7 +135,9 @@ var Collapse = forwardRef(({
           open ? /* @__PURE__ */ jsx("div", {
             id: contentId,
             className: collapseContentClass,
-            children: item.children
+            children: /* @__PURE__ */ jsx("div", {
+              children: item.children
+            })
           }) : null
         ]
       }, itemKey);

package/dist/components/color-picker/index.js

@@ -32,8 +32,9 @@ function cn(...inputs) {
 var colorPickerBaseClass = "color-picker";
 var colorPickerSwatchClass = "color-picker-swatch";
 var colorPickerTextClass = "color-picker-text";
-var colorPickerPanelClass = "color-picker-panel popover popover-show";
+var colorPickerPanelClass = "color-picker-panel popover popover-bottom popover-show";
 var colorPickerInputClass = "color-picker-input input";
+var colorPickerFormatSelectClass = "color-picker-format-select select select-sm";
 var colorPickerPresetsClass = "color-picker-presets";
 var colorPickerPresetClass = "color-picker-preset";
 var colorPickerPresetLabelClass = "color-picker-preset-label";
@@ -207,7 +208,9 @@ var ColorPicker = forwardRef(({
                   type: "button",
                   "aria-label": `Select color ${presetCss}`,
                   className: colorPickerSwatchClass,
-                  style: { backgroundColor: colorToCss(presetColor, "hex") },
+                  style: {
+                    backgroundColor: colorToCss(presetColor, "hex")
+                  },
                   onClick: () => emitChange(presetColor)
                 }, `${presetIndex}-${colorIndex}`);
               })
@@ -253,6 +256,7 @@ var ColorPicker = forwardRef(({
         children: typeof showText === "function" ? showText(cssValue) : cssValue
       }) : null,
       /* @__PURE__ */ jsxs("select", {
+        className: colorPickerFormatSelectClass,
         "aria-label": "Color format",
         value: format,
         disabled,

package/dist/components/date-picker/DatePicker.types.d.ts

@@ -1,6 +1,9 @@
 import type { ChangeEvent, ComponentProps, FocusEvent, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
 export type DatePickerValue = string;
-export type DatePickerRangeValue = [DatePickerValue | undefined, DatePickerValue | undefined];
+export type DatePickerRangeValue = [
+    DatePickerValue | undefined,
+    DatePickerValue | undefined
+];
 export type DatePickerPicker = "date" | "week" | "month" | "quarter" | "year" | "time";
 export type DatePickerSize = "sm" | "md" | "lg";
 export type DatePickerStatus = "error" | "success";

package/dist/components/date-picker/index.js

@@ -196,8 +196,7 @@ var DatePickerRoot = forwardRef(({
       }) : null,
       /* @__PURE__ */ jsx("span", {
         className: datePickerIconClass,
-        "aria-hidden": "true",
-        children: "calendar"
+        "aria-hidden": "true"
       }),
       (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs("div", {
         className: getDatePickerDropdownClasses({ open: visible }),

package/dist/components/descriptions/index.js

@@ -97,7 +97,16 @@ function toItems(items, children) {
     };
   });
 }
-var DescriptionsItem = forwardRef(({ children, label, span, labelStyle, contentStyle, className, style, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+var DescriptionsItem = forwardRef(({
+  children,
+  label,
+  span,
+  labelStyle,
+  contentStyle,
+  className,
+  style,
+  ...props
+}, ref) => /* @__PURE__ */ jsxs("div", {
   ...props,
   ref,
   className: cn(descriptionsItemClass, className),

package/dist/components/dm-date-picker/index.js

@@ -196,8 +196,7 @@ var DatePickerRoot = forwardRef(({
       }) : null,
       /* @__PURE__ */ jsx("span", {
         className: datePickerIconClass,
-        "aria-hidden": "true",
-        children: "calendar"
+        "aria-hidden": "true"
       }),
       (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs("div", {
         className: getDatePickerDropdownClasses({ open: visible }),

package/dist/components/dm-drawer/index.js

@@ -228,9 +228,7 @@ import { forwardRef as forwardRef2 } from "react";
 // src/classes/dm-drawer.ts
 var dmDrawerBaseClass = "dm-drawer";
 var dmDrawerFooterActionClass = "dm-drawer-footer-action";
-function getDmDrawerClasses({
-  className
-}) {
+function getDmDrawerClasses({ className }) {
   return cn(dmDrawerBaseClass, className);
 }
 function getDmDrawerFooterClasses({

package/dist/components/dm-page-header/index.js

@@ -698,9 +698,7 @@ var dmToolbarItemClass = "dm-toolbar-item";
 var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
 var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
 var dmToolbarMoreClass = "dm-toolbar-more";
-function getDmToolbarClasses({
-  className
-}) {
+function getDmToolbarClasses({ className }) {
   return cn(dmToolbarBaseClass, className);
 }
 function getDmToolbarItemClasses({