@particle-network/ui-react 0.1.4-beta.9 → 0.2.0

package/dist/components/UXButton/button-theme.js

@@ -378,7 +378,13 @@ const button_theme_button = tv({
             isSelected: true,
             color: 'default',
             variant: 'solid',
-            class: 'bg-foreground-100'
+            class: 'bg-tertiary'
+        },
+        {
+            isSelected: true,
+            color: 'secondary',
+            variant: 'solid',
+            class: 'bg-tertiary text-foreground'
         },
         {
             isSelected: true,

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type DatePickerProps } from '@heroui/date-picker';
+export type UXDatePickerProps = DatePickerProps;
+export declare const UXDatePicker: React.FC<UXDatePickerProps>;

package/dist/components/UXDatePicker/index.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { DatePicker } from "@heroui/date-picker";
+import { CalendarIcon } from "../../icons/index.js";
+import { calendarClassNames } from "../UXCalendar/index.js";
+const classes = {
+    inputWrapper: 'bg-background-200 h-[30px] min-h-[30px] rounded-small',
+    focus: 'focus:bg-primary/30 focus:shadow-none focus:outline-none'
+};
+const UXDatePicker = ({ classNames, ...props })=>/*#__PURE__*/ jsx(DatePicker, {
+        classNames: {
+            inputWrapper: classes.inputWrapper,
+            input: [
+                'gap-px',
+                classes.focus
+            ],
+            segment: [
+                'text-foreground text-xs font-medium',
+                classes.focus
+            ],
+            timeInput: classes.focus,
+            selectorButton: 'w-6 h-6 min-w-6 rounded-sm -mx-1',
+            selectorIcon: 'text-secondary',
+            ...classNames
+        },
+        calendarProps: {
+            classNames: calendarClassNames
+        },
+        popoverProps: {
+            classNames: {
+                base: 'before:bg-content1 before:shadow-box',
+                content: 'bg-content1 text-foreground-300 shadow-box'
+            }
+        },
+        timeInputProps: {
+            classNames: {
+                base: [
+                    '[&>[data-slot="input-wrapper"]]:h-[30px] [&>[data-slot="input-wrapper"]]:min-h-[30px] [&>[data-slot="input-wrapper"]]:rounded-small [&>[data-slot="input-wrapper"]]:bg-background-200',
+                    '[&_[data-slot=segment]:focus]:bg-primary/30 [&_[data-slot=segment]:focus]:shadow-none [&_[data-slot=segment]:focus]:outline-none'
+                ]
+            }
+        },
+        selectorIcon: /*#__PURE__*/ jsx(CalendarIcon, {
+            size: 18,
+            color: "tertiary"
+        }),
+        hourCycle: 24,
+        firstDayOfWeek: "sun",
+        ...props
+    });
+UXDatePicker.displayName = 'UX.DatePicker';
+export { UXDatePicker };

package/dist/components/UXDateRangePicker/index.js

@@ -21,7 +21,8 @@ const UXDateRangePicker = ({ classNames, ...props })=>/*#__PURE__*/ jsx(DateRang
             separator: 'text-foreground-100',
             timeInputWrapper: 'bg-content1',
             timeInput: classes.focus,
-            selectorButton: 'w-6 h-6 min-w-6 rounded-sm',
+            selectorButton: 'w-6 h-6 min-w-6 rounded-sm -mx-1',
+            selectorIcon: 'text-secondary',
             ...classNames
         },
         calendarProps: {

package/dist/components/UXPopover/popover.extend.js

@@ -3,14 +3,20 @@ import { extendVariants } from "@heroui/system-rsc";
 const ExtendedPopover = extendVariants(Popover, {
     variants: {
         size: {
+            sm: {
+                content: '!p-sm max-w-[300px]'
+            },
             md: {
-                content: 'text-tiny !p-md max-w-[300px]'
+                content: '!p-md max-w-[300px]'
+            },
+            lg: {
+                content: '!p-lg max-w-[300px]'
             }
         },
         color: {
             default: {
                 base: 'before:bg-content1 before:shadow-box',
-                content: 'bg-content1 text-foreground-300 shadow-box'
+                content: 'bg-content1 text-foreground-300 shadow-box text-tiny'
             }
         }
     },

package/dist/components/UXTooltip/tooltip.extend.js

@@ -16,7 +16,7 @@ const ExtendedTooltip = extendVariants(Tooltip, {
         color: {
             default: {
                 base: 'before:bg-content1 before:shadow-box',
-                content: 'bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 break-all hyphens-manual wrap-break-word'
+                content: 'bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 break-words wrap-break-word'
             }
         }
     },

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ export { default as UXCheckbox } from './UXCheckbox';
 export * from './UXCheckbox';
 export type { UXChipProps } from './UXChip';
 export { default as UXChip } from './UXChip';
+export * from './UXDatePicker';
 export * from './UXDateRangePicker';
 export type { UXDividerProps } from './UXDivider';
 export { default as UXDivider } from './UXDivider';

package/dist/components/index.js

@@ -22,6 +22,7 @@ import UXTooltip from "./UXTooltip/index.js";
 export * from "./UXButton/index.js";
 export * from "./UXCalendar/index.js";
 export * from "./UXCheckbox/index.js";
+export * from "./UXDatePicker/index.js";
 export * from "./UXDateRangePicker/index.js";
 export * from "./UXDropdown/index.js";
 export * from "./UXEmpty/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.1.4-beta.9",
+  "version": "0.2.0",
   "type": "module",
   "exports": {
     ".": {
@@ -39,8 +39,8 @@
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
     "typescript": "^5.8.3",
-    "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/lintstaged-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/dist/components/UXDateRangePicker/date-range-picker.extend.d.ts

@@ -1,7 +0,0 @@
-import type React from 'react';
-import { type PopoverProps } from '@heroui/popover';
-type ExtendedPopoverProps = Omit<PopoverProps, 'color'> & {
-    color?: 'default';
-};
-declare const ExtendedPopover: React.ForwardRefExoticComponent<ExtendedPopoverProps>;
-export default ExtendedPopover;

package/dist/components/UXDateRangePicker/date-range-picker.extend.js

@@ -1,26 +0,0 @@
-import { Popover } from "@heroui/popover";
-import { extendVariants } from "@heroui/system-rsc";
-const ExtendedPopover = extendVariants(Popover, {
-    variants: {
-        size: {
-            md: {
-                content: 'text-tiny !p-md max-w-[300px]'
-            }
-        },
-        color: {
-            default: {
-                base: 'before:bg-content1 before:shadow-box',
-                content: 'bg-content1 text-foreground-300 shadow-box'
-            }
-        }
-    },
-    defaultVariants: {
-        color: 'default',
-        radius: 'md',
-        size: 'md',
-        shadow: 'md',
-        backdrop: 'transparent'
-    }
-});
-const date_range_picker_extend = ExtendedPopover;
-export { date_range_picker_extend as default };