@tecsinapse/cortex-react 1.10.1 → 1.11.0

package/dist/cjs/components/ColorPicker.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const Box = React.forwardRef((props, ref) => {
+  const { id, ...rest } = props;
+  return /* @__PURE__ */ React.createElement("div", { className: "w-tera h-kilo overflow-hidden relative" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...rest,
+      id,
+      type: "color",
+      className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
+      ref
+    }
+  ));
+});
+const Face = ({ children }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2" }, children);
+};
+const Label = ({
+  children,
+  id,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement("label", { ...rest, htmlFor: id, className: clsx("text-base", className) }, children);
+};
+const Root = React.forwardRef((props, ref) => {
+  const { id, value, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Face, null, /* @__PURE__ */ React.createElement(Box, { ...rest, ref, id, value }), value ? /* @__PURE__ */ React.createElement(Label, { id }, value) : null);
+});
+const ColorPicker = {
+  Box,
+  Face,
+  Label,
+  Root
+};
+
+exports.ColorPicker = ColorPicker;

package/dist/cjs/index.js

@@ -11,6 +11,7 @@ var RangeCalendar = require('./components/Calendar/RangeCalendar.js');
 var Card = require('./components/Card.js');
 var Carousel = require('./components/Carousel/Carousel.js');
 var Checkbox = require('./components/Checkbox.js');
+var ColorPicker = require('./components/ColorPicker.js');
 var DateField = require('./components/DatePicker/DateField.js');
 var DatePickerInput = require('./components/DatePicker/DatePickerInput.js');
 var DatePickerInputBase = require('./components/DatePicker/DatePickerInputBase.js');
@@ -81,6 +82,7 @@ exports.RangeCalendar = RangeCalendar.RangeCalendar;
 exports.Card = Card.Card;
 exports.Carousel = Carousel.Carousel;
 exports.Checkbox = Checkbox.Checkbox;
+exports.ColorPicker = ColorPicker.ColorPicker;
 exports.DateField = DateField.DateField;
 exports.DatePickerInput = DatePickerInput.DatePickerInput;
 exports.DatePickerInputBase = DatePickerInputBase.DatePickerInputBase;

package/dist/esm/components/ColorPicker.js

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import React__default, { forwardRef } from 'react';
+
+const Box = forwardRef((props, ref) => {
+  const { id, ...rest } = props;
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-tera h-kilo overflow-hidden relative" }, /* @__PURE__ */ React__default.createElement(
+    "input",
+    {
+      ...rest,
+      id,
+      type: "color",
+      className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
+      ref
+    }
+  ));
+});
+const Face = ({ children }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2" }, children);
+};
+const Label = ({
+  children,
+  id,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React__default.createElement("label", { ...rest, htmlFor: id, className: clsx("text-base", className) }, children);
+};
+const Root = forwardRef((props, ref) => {
+  const { id, value, ...rest } = props;
+  return /* @__PURE__ */ React__default.createElement(Face, null, /* @__PURE__ */ React__default.createElement(Box, { ...rest, ref, id, value }), value ? /* @__PURE__ */ React__default.createElement(Label, { id }, value) : null);
+});
+const ColorPicker = {
+  Box,
+  Face,
+  Label,
+  Root
+};
+
+export { ColorPicker };

package/dist/esm/index.js

@@ -9,6 +9,7 @@ export { RangeCalendar } from './components/Calendar/RangeCalendar.js';
 export { Card } from './components/Card.js';
 export { Carousel } from './components/Carousel/Carousel.js';
 export { Checkbox } from './components/Checkbox.js';
+export { ColorPicker } from './components/ColorPicker.js';
 export { DateField } from './components/DatePicker/DateField.js';
 export { DatePickerInput } from './components/DatePicker/DatePickerInput.js';
 export { DatePickerInputBase } from './components/DatePicker/DatePickerInputBase.js';

package/dist/types/components/ColorPicker.d.ts

@@ -0,0 +1,11 @@
+import React, { type HTMLAttributes, type InputHTMLAttributes } from 'react';
+export interface ColorPickerProps extends InputHTMLAttributes<HTMLInputElement> {
+}
+export declare const ColorPicker: {
+    Box: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLInputElement>>;
+    Face: ({ children }: {
+        children: any;
+    }) => React.JSX.Element;
+    Label: ({ children, id, className, ...rest }: HTMLAttributes<HTMLLabelElement>) => React.JSX.Element;
+    Root: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLInputElement>>;
+};

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

@@ -7,6 +7,7 @@ export * from './Calendar';
 export * from './Card';
 export * from './Carousel';
 export * from './Checkbox';
+export * from './ColorPicker';
 export * from './DatePicker';
 export * from './Divider';
 export * from './Drawer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -47,5 +47,5 @@
     "react-icons": ">=5.2.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "0a687dd331d6aecdb8cb7ee10c7165e9f22fcbb8"
+  "gitHead": "877d186b6baa3318b15870bb874524b978ef0211"
 }