@scaleflex/ui-tw 0.0.63 → 0.0.66

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

@@ -0,0 +1,4 @@
+import { ColorPaletteProps } from '@scaleflex/ui-tw/color-palette/color-palette.types';
+import React from 'react';
+declare function ColorPalette({ colors, value, onSelect, className, size, colorBoxClassName, }: ColorPaletteProps): React.JSX.Element;
+export { ColorPalette };

package/color-palette/color-palette.component.js

@@ -0,0 +1,53 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { colorBoxSizeOptions } from '@scaleflex/ui-tw/color-palette/color-palette.constants';
+import { isLightColor } from '@scaleflex/ui-tw/color-palette/color-palette.utils';
+import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import { CheckIcon } from 'lucide-react';
+import React from 'react';
+var colorBoxVariants = cva('', {
+  variants: {
+    size: colorBoxSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function ColorPalette(_ref) {
+  var colors = _ref.colors,
+    value = _ref.value,
+    onSelect = _ref.onSelect,
+    className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    colorBoxClassName = _ref.colorBoxClassName;
+  return /*#__PURE__*/React.createElement(RadioGroupPrimitive.Root, {
+    "data-slot": "color-palette",
+    className: cn('flex flex-wrap gap-2', className),
+    value: value,
+    onValueChange: function onValueChange(val) {
+      return onSelect(val);
+    },
+    role: "radiogroup"
+  }, colors.map(function (color) {
+    return /*#__PURE__*/React.createElement(RadioGroupPrimitive.Item, {
+      key: color,
+      value: color,
+      "data-slot": "color-palette-item",
+      className: cn('border-border inline-block rounded-lg border-1 p-0.5 hover:opacity-80', focusRingClassNames, colorBoxVariants({
+        size: size
+      }), colorBoxClassName, value === color && 'border-primary'),
+      "aria-label": "Color ".concat(color)
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        backgroundColor: color
+      },
+      className: cn('relative h-full w-full cursor-pointer rounded-md shadow-xs transition-all')
+    }, value === color && /*#__PURE__*/React.createElement(CheckIcon, {
+      className: cn('absolute inset-0 m-auto h-4 w-4', isLightColor(color) ? 'text-dark' : 'text-white')
+    })));
+  }));
+}
+export { ColorPalette };

package/color-palette/color-palette.constants.d.ts

@@ -0,0 +1,5 @@
+export declare const colorBoxSizeOptions: {
+    readonly sm: "size-6";
+    readonly md: "size-8";
+    readonly lg: "size-10";
+};

package/color-palette/color-palette.constants.js

@@ -0,0 +1,3 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var colorBoxSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-6'), FormSize.Md, 'size-8'), FormSize.Lg, 'size-10');

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

@@ -0,0 +1,9 @@
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+export type ColorPaletteProps = {
+    colors: string[];
+    value: string;
+    onSelect: (value: string) => void;
+    className?: string;
+    colorBoxClassName?: string;
+    size?: FormSizeType;
+};

package/color-palette/color-palette.types.js

@@ -0,0 +1 @@
+export {};

package/color-palette/color-palette.utils.d.ts

@@ -0,0 +1 @@
+export declare const isLightColor: (hex: string) => boolean;

package/color-palette/color-palette.utils.js

@@ -0,0 +1,8 @@
+export var isLightColor = function isLightColor(hex) {
+  var parsed = hex.replace('#', '');
+  var r = parseInt(parsed.substring(0, 2), 16);
+  var g = parseInt(parsed.substring(2, 4), 16);
+  var b = parseInt(parsed.substring(4, 6), 16);
+  var brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness >= 200;
+};

package/color-palette/index.d.ts

@@ -0,0 +1 @@
+export { ColorPalette } from './color-palette.component';

package/color-palette/index.js

@@ -0,0 +1 @@
+export { ColorPalette } from './color-palette.component';

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

@@ -0,0 +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, }: ColorPickerProps): React.JSX.Element;
+export { ColorPicker };

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

@@ -0,0 +1,80 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Button } from '@scaleflex/ui-tw/button';
+import { ColorPalette } from '@scaleflex/ui-tw/color-palette';
+import { Dialog, DialogFormBody, DialogFormContent, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogTrigger } from '@scaleflex/ui-tw/dialog';
+import { inputVariants } from '@scaleflex/ui-tw/input';
+import { getBaseInputClasses, readOnlyClassNames, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { PaletteIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import { HexColorInput, HexColorPicker } from 'react-colorful';
+function ColorPicker(_ref) {
+  var value = _ref.value,
+    placeholder = _ref.placeholder,
+    _onChange = _ref.onChange,
+    onCancel = _ref.onCancel,
+    onSelect = _ref.onSelect,
+    className = _ref.className,
+    children = _ref.children,
+    presetColors = _ref.presetColors;
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    tempValue = _useState2[0],
+    setTempValue = _useState2[1];
+  var handleSelect = function handleSelect() {
+    onSelect === null || onSelect === void 0 || onSelect(tempValue);
+  };
+  var handleCancel = function handleCancel() {
+    onCancel === null || onCancel === void 0 || onCancel();
+    setTempValue(value);
+  };
+  return /*#__PURE__*/React.createElement(Dialog, null, /*#__PURE__*/React.createElement(DialogTrigger, {
+    asChild: true
+  }, children || /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "border-muted h-8 w-8 rounded border shadow-inner",
+    style: {
+      backgroundColor: value
+    },
+    "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, {
+    className: "space-y-4"
+  }, /*#__PURE__*/React.createElement(HexColorPicker, {
+    color: tempValue,
+    onChange: function onChange(color) {
+      setTempValue(color);
+      _onChange === null || _onChange === void 0 || _onChange(color);
+    },
+    className: "!w-full"
+  }), /*#__PURE__*/React.createElement(HexColorInput, {
+    id: "colorv2",
+    color: tempValue,
+    onChange: function onChange(color) {
+      setTempValue(color);
+      _onChange === null || _onChange === void 0 || _onChange(color);
+    },
+    placeholder: placeholder || 'Enter hex color',
+    className: cn.apply(void 0, ['flex w-full min-w-0 font-mono'].concat(_toConsumableArray(getBaseInputClasses()), [readOnlyClassNames, selectionHighlightClassNames, inputVariants()]))
+  }), presetColors && /*#__PURE__*/React.createElement(ColorPalette, {
+    className: "gap-1.75",
+    colorBoxClassName: "p-0.5",
+    value: tempValue,
+    colors: presetColors,
+    onSelect: setTempValue
+  })), /*#__PURE__*/React.createElement(DialogFormFooter, null, /*#__PURE__*/React.createElement(DialogTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outline",
+    className: "flex-1",
+    onClick: handleCancel
+  }, "Cancel")), /*#__PURE__*/React.createElement(DialogTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "flex-1",
+    onClick: handleSelect
+  }, "Select")))));
+}
+export { ColorPicker };

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

@@ -0,0 +1,11 @@
+import type { ReactElement, ReactNode } from 'react';
+export type ColorPickerProps = {
+    value: string;
+    onSelect: (value: string) => void;
+    onChange?: (value: string) => void;
+    onCancel?: () => void;
+    className?: string;
+    children?: ReactNode;
+    placeholder?: ReactElement | string;
+    presetColors?: string[];
+};

package/color-picker/color-picker.types.js

@@ -0,0 +1 @@
+export {};

package/color-picker/index.d.ts

@@ -0,0 +1 @@
+export { ColorPicker } from './color-picker.component';

package/color-picker/index.js

@@ -0,0 +1 @@
+export { ColorPicker } from './color-picker.component';

package/combobox/combobox.component.js

@@ -170,7 +170,7 @@ export function ComboboxCheckboxTrigger(_ref3) {
   }, label || children), displayCount && selectedLength > 0 && optionsLength > 1 && /*#__PURE__*/React.createElement("span", {
     className: "text-muted-foreground text-sm"
   }, selectedLength, "/", optionsLength)), /*#__PURE__*/React.createElement("div", {
-    className: "ml-2 flex items-center gap-1 pl-1"
+    className: "flex items-center gap-1"
   }, showClear && !!onClearAll && selected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     role: "button",
     tabIndex: 0,
@@ -266,7 +266,7 @@ export function ComboboxContent(_ref4) {
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
     return /*#__PURE__*/React.createElement(CommandGroup, {
-      key: "default"
+      key: groupIndex
     }, /*#__PURE__*/React.createElement(CommandItem, {
       size: size,
       multiple: multiple,
@@ -356,7 +356,7 @@ export function ComboboxCheckboxContent(_ref6) {
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
     return /*#__PURE__*/React.createElement(CommandGroup, {
-      key: "default"
+      key: groupIndex
     }, /*#__PURE__*/React.createElement(CommandCheckboxItem, {
       size: size,
       disabled: option.disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.63",
+  "version": "0.0.66",
   "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.63",
+    "@scaleflex/icons-tw": "^0.0.66",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
@@ -32,6 +32,7 @@
     "lodash.merge": "^4.6.2",
     "lucide-react": "^0.487.0",
     "prop-types": "^15.7.2",
+    "react-colorful": "^5.6.1",
     "react-day-picker": "^9.7.0",
     "sonner": "^2.0.3",
     "tailwind-scrollbar": "^4.0.2",