@particle-network/ui-react 0.1.4-beta.6 → 0.1.4-beta.8

package/dist/components/UXCheckbox/checkbox.extend.d.ts

@@ -1,7 +1,8 @@
 import type React from 'react';
 import { type CheckboxProps } from '@heroui/checkbox';
 type ExtendedCheckboxProps = Omit<CheckboxProps, 'color'> & {
-    color?: 'primary' | 'success' | 'warning' | 'danger' | 'bullish' | 'bearish';
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'bullish' | 'bearish';
+    labelPlacement?: 'left' | 'right';
 };
 declare const ExtendedCheckbox: React.ForwardRefExoticComponent<ExtendedCheckboxProps>;
 export default ExtendedCheckbox;

package/dist/components/UXCheckbox/checkbox.extend.js

@@ -6,6 +6,9 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
             primary: {
                 wrapper: 'after:bg-primary after:text-primary-foreground text-primary-foreground'
             },
+            secondary: {
+                wrapper: 'after:bg-tertiary after:text-tertiary-foreground text-tertiary-foreground'
+            },
             success: {
                 wrapper: 'after:bg-success after:text-success-foreground text-success-foreground'
             },
@@ -25,9 +28,9 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
         size: {
             sm: {
                 wrapper: [
-                    'w-3.5 h-3.5 me-sm',
+                    'w-3.5 h-3.5 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-foreground-300 before:border-1.5',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1.5',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
                 label: '!text-body3 font-medium',
@@ -35,9 +38,9 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
             },
             md: {
                 wrapper: [
-                    'w-4 h-4 me-2',
+                    'w-4 h-4 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-foreground-300 before:border-2',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-2',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
                 label: '!text-body2 font-medium',
@@ -45,9 +48,9 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
             },
             lg: {
                 wrapper: [
-                    'w-5 h-5 me-2',
+                    'w-[18px] h-[18px] me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.3)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-foreground-300 before:border-2',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-2',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.3)]'
                 ],
                 label: '!text-body1 font-medium',
@@ -138,13 +141,22 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 icon: 'transition-opacity motion-reduce:transition-none',
                 label: 'transition-colors-opacity before:transition-width motion-reduce:transition-none'
             }
+        },
+        labelPlacement: {
+            left: {
+                base: 'flex-row-reverse gap-2'
+            },
+            right: {
+                base: 'flex-row gap-2'
+            }
         }
     },
     defaultVariants: {
         color: 'primary',
         size: 'md',
         isDisabled: false,
-        lineThrough: false
+        lineThrough: false,
+        labelPlacement: 'right'
     }
 });
 const checkbox_extend = ExtendedCheckbox;

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

@@ -3,7 +3,8 @@ import { type CheckboxGroupProps } from '@heroui/checkbox';
 import ExtendedCheckbox from './checkbox.extend';
 export type UXCheckboxProps = React.ComponentPropsWithRef<typeof ExtendedCheckbox>;
 declare const UXCheckbox: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/checkbox").CheckboxProps, "color"> & {
-    color?: "primary" | "success" | "warning" | "danger" | "bullish" | "bearish";
+    color?: "primary" | "secondary" | "success" | "warning" | "danger" | "bullish" | "bearish";
+    labelPlacement?: "left" | "right";
 }, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default UXCheckbox;
 export declare const UXCheckboxGroup: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", CheckboxGroupProps, never>;

package/dist/components/UXDateRangePicker/index.js

@@ -3,13 +3,25 @@ import "react";
 import { DateRangePicker } 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 UXDateRangePicker = ({ classNames, ...props })=>/*#__PURE__*/ jsx(DateRangePicker, {
         classNames: {
-            inputWrapper: 'bg-background-200 h-[30px] min-h-[30px] rounded-small',
-            input: 'gap-px',
-            segment: 'text-foreground text-xs font-medium',
+            inputWrapper: classes.inputWrapper,
+            input: [
+                'gap-px',
+                classes.focus
+            ],
+            segment: [
+                'text-foreground text-xs font-medium',
+                classes.focus
+            ],
             separator: 'text-foreground-100',
             timeInputWrapper: 'bg-content1',
+            timeInput: classes.focus,
+            selectorButton: 'w-6 h-6 min-w-6 rounded-sm',
             ...classNames
         },
         calendarProps: {
@@ -21,8 +33,17 @@ const UXDateRangePicker = ({ classNames, ...props })=>/*#__PURE__*/ jsx(DateRang
                 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
+            size: 18,
+            color: "tertiary"
         }),
         granularity: "second",
         visibleMonths: 2,

package/dist/components/UXTabs/tabs.classes.js

@@ -4,25 +4,25 @@ const tabsClasses = {
         variant: {
             solid: {
                 tabList: 'gap-0 bg-background-400',
-                tab: 'py-0',
+                tab: 'py-0 !outline-none',
                 cursor: 'shadow-none inset-0',
                 tabContent: 'text-foreground-300 font-medium'
             },
             switch: {
                 tabList: 'p-0 gap-0 bg-background-200',
-                tab: 'py-0',
+                tab: 'py-0 !outline-none',
                 cursor: 'shadow-none inset-0',
                 tabContent: 'text-foreground-300 font-medium'
             },
             light: {
                 tabList: 'p-0 gap-md rounded-none bg-transparent dark:bg-transparent',
-                tab: 'py-0 h-full',
+                tab: 'py-0 h-full !outline-none',
                 cursor: 'shadow-none',
                 tabContent: 'text-foreground-300 font-medium'
             },
             text: {
                 tabList: 'p-0 rounded-none bg-transparent dark:bg-transparent',
-                tab: 'font-medium p-0 h-fit rounded-none',
+                tab: 'font-medium p-0 h-fit rounded-none !outline-none',
                 tabContent: 'text-foreground-300 font-medium',
                 cursor: 'hidden'
             }

package/package.json

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

package/tailwind-preset.js

@@ -124,6 +124,9 @@ module.exports = {
             content1: {
               DEFAULT: '#FFFFFF',
             },
+            overlay: {
+              DEFAULT: '#FFFFFF',
+            },
             background: {
               200: '#E8E8ED',
               300: '#F0F0F2',
@@ -149,7 +152,11 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             secondary: {
-              DEFAULT: '#E8E8EB',
+              DEFAULT: '#767A80',
+              foreground: '#FFFFFF',
+            },
+            tertiary: {
+              DEFAULT: '#C0C0C9',
               foreground: '#000000',
             },
             success: {
@@ -175,6 +182,9 @@ module.exports = {
             content1: {
               DEFAULT: '#17171C',
             },
+            overlay: {
+              DEFAULT: '#17171C',
+            },
             background: {
               200: '#1F1F23',
               300: '#17171C',
@@ -200,7 +210,11 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             secondary: {
-              DEFAULT: '#1F1F23',
+              DEFAULT: '#A1A1AA',
+              foreground: '#FFFFFF',
+            },
+            tertiary: {
+              DEFAULT: '#4E4E56',
               foreground: '#FFFFFF',
             },
             success: {