@scaleflex/ui-tw 0.0.68 → 0.0.71

package/color-picker/color-picker.component.d.ts

@@ -1,4 +1,4 @@
 import type { ColorPickerProps } from '@scaleflex/ui-tw/color-picker/color-picker.types';
 import React from 'react';
-declare function ColorPicker({ value, placeholder, onChange, onCancel, onSelect, className, children, presetColors, displayAsInput, }: ColorPickerProps): React.JSX.Element;
+declare function ColorPicker({ title, value, placeholder, onChange, onCancel, onSelect, inputTriggerProps, className, inputClassName, cancelLabel, selectLabel, children, presetColors, displayAsInput, }: ColorPickerProps): React.JSX.Element;
 export { ColorPicker };

package/color-picker/color-picker.component.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { Button } from '@scaleflex/ui-tw/button';
@@ -10,12 +11,17 @@ import { PaletteIcon } from 'lucide-react';
 import React, { useState } from 'react';
 import { HexColorInput, HexColorPicker } from 'react-colorful';
 function ColorPicker(_ref) {
-  var value = _ref.value,
+  var title = _ref.title,
+    value = _ref.value,
     placeholder = _ref.placeholder,
     _onChange = _ref.onChange,
     onCancel = _ref.onCancel,
     onSelect = _ref.onSelect,
+    inputTriggerProps = _ref.inputTriggerProps,
     className = _ref.className,
+    inputClassName = _ref.inputClassName,
+    cancelLabel = _ref.cancelLabel,
+    selectLabel = _ref.selectLabel,
     children = _ref.children,
     presetColors = _ref.presetColors,
     _ref$displayAsInput = _ref.displayAsInput,
@@ -46,15 +52,15 @@ function ColorPicker(_ref) {
     "aria-label": "Open color picker"
   })), /*#__PURE__*/React.createElement("span", {
     className: "text-muted-foreground absolute left-11 h-10 leading-10"
-  }, "#"), /*#__PURE__*/React.createElement(HexColorInput, {
+  }, "#"), /*#__PURE__*/React.createElement(HexColorInput, _extends({}, inputTriggerProps, {
     color: value,
     onChange: function onChange(color) {
       setTempValue(color);
       onSelect === null || onSelect === void 0 || onSelect(color);
     },
     placeholder: placeholder || 'Enter hex color',
-    className: cn.apply(void 0, ['w-full bg-transparent font-mono outline-none', 'flex items-center gap-2'].concat(_toConsumableArray(getBaseInputClasses()), [readOnlyClassNames, selectionHighlightClassNames, inputVariants(), 'pl-14', className]))
-  })) : /*#__PURE__*/React.createElement(DialogTrigger, {
+    className: cn.apply(void 0, ['w-full bg-transparent font-mono outline-none', 'flex items-center gap-2'].concat(_toConsumableArray(getBaseInputClasses()), [readOnlyClassNames, selectionHighlightClassNames, inputVariants(), 'pl-14', inputClassName]))
+  }))) : /*#__PURE__*/React.createElement(DialogTrigger, {
     asChild: true
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -65,7 +71,7 @@ function ColorPicker(_ref) {
     "aria-label": "Open color picker"
   })), /*#__PURE__*/React.createElement(DialogFormContent, {
     className: cn('w-[316px]', className)
-  }, /*#__PURE__*/React.createElement(DialogFormHeader, null, /*#__PURE__*/React.createElement(DialogFormIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogFormTitle, null, "Pick color")), /*#__PURE__*/React.createElement(DialogFormBody, {
+  }, /*#__PURE__*/React.createElement(DialogFormHeader, null, /*#__PURE__*/React.createElement(DialogFormIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogFormTitle, null, title || 'Pick color')), /*#__PURE__*/React.createElement(DialogFormBody, {
     className: "space-y-4"
   }, /*#__PURE__*/React.createElement(HexColorPicker, {
     color: tempValue,
@@ -95,11 +101,11 @@ function ColorPicker(_ref) {
     variant: "outline",
     className: "flex-1",
     onClick: handleCancel
-  }, "Cancel")), /*#__PURE__*/React.createElement(DialogTrigger, {
+  }, cancelLabel || 'Cancel')), /*#__PURE__*/React.createElement(DialogTrigger, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Button, {
     className: "flex-1",
     onClick: handleSelect
-  }, "Select")))));
+  }, selectLabel || 'Select')))));
 }
 export { ColorPicker };

package/color-picker/color-picker.types.d.ts

@@ -1,10 +1,15 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { InputHTMLAttributes, ReactElement, ReactNode } from 'react';
 export type ColorPickerProps = {
     value: string;
     onSelect: (value: string) => void;
     onChange?: (value: string) => void;
     onCancel?: () => void;
+    inputTriggerProps?: InputHTMLAttributes<HTMLInputElement>;
     className?: string;
+    title?: string | ReactElement;
+    cancelLabel?: string | ReactElement;
+    selectLabel?: string | ReactElement;
+    inputClassName?: string;
     children?: ReactNode;
     placeholder?: ReactElement | string;
     presetColors?: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.68",
+  "version": "0.0.71",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -23,7 +23,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.68",
+    "@scaleflex/icons-tw": "^0.0.71",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",