@cdx-ui/components 0.1.6 → 0.2.0

package/lib/module/components/ColorArea/ColorAreaPaint.web.js

@@ -0,0 +1,27 @@
+"use strict";
+
+import { View } from 'react-native';
+import { useColorAreaContext } from '@cdx-ui/primitives';
+import { colorAreaPaintVariants } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ColorAreaPaint() {
+  const {
+    value,
+    isRTL
+  } = useColorAreaContext();
+  const hue = value.withChannel('hsb', 'saturation', 100).withChannel('hsb', 'brightness', 100).toString('hex');
+  const direction = isRTL ? 'to left' : 'to right';
+  const paintStyle = {
+    backgroundImage: ['linear-gradient(to bottom, transparent, #000000)', `linear-gradient(${direction}, #FFFFFF, ${hue})`].join(', '),
+    pointerEvents: 'none'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    className: colorAreaPaintVariants(),
+    style: paintStyle,
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  });
+}
+ColorAreaPaint.displayName = 'ColorAreaPaint';
+//# sourceMappingURL=ColorAreaPaint.web.js.map

package/lib/module/components/ColorArea/ColorAreaPaint.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","useColorAreaContext","colorAreaPaintVariants","jsx","_jsx","ColorAreaPaint","value","isRTL","hue","withChannel","toString","direction","paintStyle","backgroundImage","join","pointerEvents","className","style","accessible","accessibilityElementsHidden","importantForAccessibility","displayName"],"sourceRoot":"../../../../src","sources":["components/ColorArea/ColorAreaPaint.web.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAwB,cAAc;AACnD,SAASC,mBAAmB,QAAQ,oBAAoB;AACxD,SAASC,sBAAsB,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElD,OAAO,SAASC,cAAcA,CAAA,EAAG;EAC/B,MAAM;IAAEC,KAAK;IAAEC;EAAM,CAAC,GAAGN,mBAAmB,CAAC,CAAC;EAC9C,MAAMO,GAAG,GAAGF,KAAK,CACdG,WAAW,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,CAAC,CACrCA,WAAW,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,CAAC,CACrCC,QAAQ,CAAC,KAAK,CAAC;EAClB,MAAMC,SAAS,GAAGJ,KAAK,GAAG,SAAS,GAAG,UAAU;EAChD,MAAMK,UAAU,GAAG;IACjBC,eAAe,EAAE,CACf,kDAAkD,EAClD,mBAAmBF,SAAS,cAAcH,GAAG,GAAG,CACjD,CAACM,IAAI,CAAC,IAAI,CAAC;IACZC,aAAa,EAAE;EACjB,CAAyB;EAEzB,oBACEX,IAAA,CAACJ,IAAI;IACHgB,SAAS,EAAEd,sBAAsB,CAAC,CAAE;IACpCe,KAAK,EAAEL,UAAW;IAClBM,UAAU,EAAE,KAAM;IAClBC,2BAA2B;IAC3BC,yBAAyB,EAAC;EAAqB,CAChD,CAAC;AAEN;AAEAf,cAAc,CAACgB,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/lib/module/components/ColorArea/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { ColorAreaRoot as ColorAreaRootPrimitive, ColorAreaThumb as ColorAreaThumbPrimitive, dataAttributes, mergeDataAttributes, useColorAreaContext } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { ColorAreaPaint } from './ColorAreaPaint';
+import { colorAreaThumbVariants, colorAreaVariants } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ColorAreaRoot = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/_jsxs(ColorAreaRootPrimitive, {
+  ref: ref,
+  asChild: asChild,
+  className: cn(colorAreaVariants(), className),
+  style: style,
+  ...props,
+  ...mergeDataAttributes(props, dataAttributes({
+    slot: 'color-area'
+  })),
+  children: [/*#__PURE__*/_jsx(ColorAreaPaint, {}), children]
+}));
+ColorAreaRoot.displayName = 'ColorArea';
+const ColorAreaThumb = /*#__PURE__*/forwardRef(({
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const {
+    value
+  } = useColorAreaContext();
+  return /*#__PURE__*/_jsx(ColorAreaThumbPrimitive, {
+    ref: ref,
+    className: cn(colorAreaThumbVariants(), className),
+    style: [{
+      backgroundColor: value.toString('hex')
+    }, style],
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'color-area-thumb'
+    })),
+    children: children
+  });
+});
+ColorAreaThumb.displayName = 'ColorArea.Thumb';
+export const ColorArea = Object.assign(ColorAreaRoot, {
+  Thumb: ColorAreaThumb
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/ColorArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","ColorAreaRoot","ColorAreaRootPrimitive","ColorAreaThumb","ColorAreaThumbPrimitive","dataAttributes","mergeDataAttributes","useColorAreaContext","cn","ColorAreaPaint","colorAreaThumbVariants","colorAreaVariants","jsx","_jsx","jsxs","_jsxs","asChild","className","style","children","props","ref","slot","displayName","value","backgroundColor","toString","ColorArea","Object","assign","Thumb"],"sourceRoot":"../../../../src","sources":["components/ColorArea/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAElD,SACEC,aAAa,IAAIC,sBAAsB,EACvCC,cAAc,IAAIC,uBAAuB,EACzCC,cAAc,EACdC,mBAAmB,EACnBC,mBAAmB,QAGd,oBAAoB;AAC3B,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,sBAAsB,EAAEC,iBAAiB,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQrE,MAAMd,aAAa,gBAAGD,UAAU,CAC9B,CAAC;EAAEgB,OAAO;EAAEC,SAAS;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,kBACrDN,KAAA,CAACb,sBAAsB;EACrBmB,GAAG,EAAEA,GAAI;EACTL,OAAO,EAAEA,OAAQ;EACjBC,SAAS,EAAET,EAAE,CAACG,iBAAiB,CAAC,CAAC,EAAEM,SAAS,CAAE;EAC9CC,KAAK,EAAEA,KAAM;EAAA,GACTE,KAAK;EAAA,GACLd,mBAAmB,CAACc,KAAK,EAAEf,cAAc,CAAC;IAAEiB,IAAI,EAAE;EAAa,CAAC,CAAC,CAAC;EAAAH,QAAA,gBAEtEN,IAAA,CAACJ,cAAc,IAAE,CAAC,EACjBU,QAAQ;AAAA,CACa,CAE5B,CAAC;AAEDlB,aAAa,CAACsB,WAAW,GAAG,WAAW;AAOvC,MAAMpB,cAAc,gBAAGH,UAAU,CAC/B,CAAC;EAAEiB,SAAS;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACjD,MAAM;IAAEG;EAAM,CAAC,GAAGjB,mBAAmB,CAAC,CAAC;EAEvC,oBACEM,IAAA,CAACT,uBAAuB;IACtBiB,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAET,EAAE,CAACE,sBAAsB,CAAC,CAAC,EAAEO,SAAS,CAAE;IACnDC,KAAK,EAAE,CAAC;MAAEO,eAAe,EAAED,KAAK,CAACE,QAAQ,CAAC,KAAK;IAAE,CAAC,EAAER,KAAK,CAAE;IAAA,GACvDE,KAAK;IAAA,GACLd,mBAAmB,CAACc,KAAK,EAAEf,cAAc,CAAC;MAAEiB,IAAI,EAAE;IAAmB,CAAC,CAAC,CAAC;IAAAH,QAAA,EAE3EA;EAAQ,CACc,CAAC;AAE9B,CACF,CAAC;AAEDhB,cAAc,CAACoB,WAAW,GAAG,iBAAiB;AAM9C,OAAO,MAAMI,SAAS,GAAGC,MAAM,CAACC,MAAM,CAAC5B,aAAa,EAAE;EACpD6B,KAAK,EAAE3B;AACT,CAAC,CAA+B","ignoreList":[]}

package/lib/module/components/ColorArea/styles.js

@@ -0,0 +1,8 @@
+"use strict";
+
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR } from '../../styles/constants';
+export const colorAreaVariants = cva(['relative aspect-square w-full touch-none select-none', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR]);
+export const colorAreaPaintVariants = cva(['absolute inset-0 overflow-hidden rounded-[var(--border-radius-default)]']);
+export const colorAreaThumbVariants = cva(['z-2 size-5 rounded-[var(--border-radius-round)]', 'border-2 border-surface-primary shadow-md', 'transition-none']);
+//# sourceMappingURL=styles.js.map

package/lib/module/components/ColorArea/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","DISABLED_CURSOR","colorAreaVariants","colorAreaPaintVariants","colorAreaThumbVariants"],"sourceRoot":"../../../../src","sources":["components/ColorArea/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,eAAe;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAExD,OAAO,MAAMC,iBAAiB,GAAGF,GAAG,CAAC,CACnC,sDAAsD,EACtD,wDAAwD,EACxDC,eAAe,CAChB,CAAC;AAEF,OAAO,MAAME,sBAAsB,GAAGH,GAAG,CAAC,CACxC,yEAAyE,CAC1E,CAAC;AAEF,OAAO,MAAMI,sBAAsB,GAAGJ,GAAG,CAAC,CACxC,iDAAiD,EACjD,2CAA2C,EAC3C,iBAAiB,CAClB,CAAC","ignoreList":[]}

package/lib/module/components/ColorField/index.js

@@ -0,0 +1,134 @@
+"use strict";
+
+import { forwardRef, useMemo } from 'react';
+import { View } from 'react-native';
+import { ColorFieldInput as ColorFieldInputPrimitive, ColorFieldRoot as ColorFieldRootPrimitive, InputRoot as InputRootPrimitive, Slot, dataAttributes, mergeDataAttributes, useColorFieldContext } from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { positionToDataIcon } from '../../utils/positionToDataIcon';
+import { colorFieldGroupVariants, colorFieldInputPlaceholderVariants, colorFieldInputVariants, colorFieldSlotVariants, colorFieldVariants } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SCOPE = 'COLOR_FIELD';
+const useColorFieldStyleContext = () => useParentContext()[SCOPE] ?? {};
+const ColorFieldRoot = /*#__PURE__*/forwardRef(({
+  variant = 'outline',
+  size = 'default',
+  fullWidth,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const parent = useParentContext();
+  const context = useMemo(() => ({
+    ...parent,
+    [SCOPE]: {
+      variant,
+      size,
+      fullWidth
+    }
+  }), [fullWidth, parent, size, variant]);
+  return /*#__PURE__*/_jsx(ParentContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(ColorFieldRootPrimitive, {
+      ref: ref,
+      className: cn(colorFieldVariants(), className),
+      style: style,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({
+        slot: 'color-field'
+      })),
+      children: children
+    })
+  });
+});
+ColorFieldRoot.displayName = 'ColorField';
+const ColorFieldGroup = /*#__PURE__*/forwardRef(({
+  asChild,
+  variant,
+  size,
+  fullWidth,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const inherited = useColorFieldStyleContext();
+  const {
+    disabled,
+    invalid,
+    readOnly,
+    required
+  } = useColorFieldContext();
+  const resolvedVariant = variant ?? inherited.variant ?? 'outline';
+  const resolvedSize = size ?? inherited.size ?? 'default';
+  const resolvedFullWidth = fullWidth ?? inherited.fullWidth ?? true;
+  return /*#__PURE__*/_jsx(InputRootPrimitive, {
+    ref: ref,
+    asChild: asChild,
+    isDisabled: disabled,
+    isInvalid: invalid,
+    isReadOnly: readOnly,
+    isRequired: required,
+    className: cn(colorFieldGroupVariants({
+      variant: resolvedVariant,
+      size: resolvedSize
+    }), !resolvedFullWidth && 'w-auto self-start', className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'color-field-group'
+    })),
+    children: children
+  });
+});
+ColorFieldGroup.displayName = 'ColorField.Group';
+const ColorFieldInput = /*#__PURE__*/forwardRef(({
+  className,
+  placeholderTextColorClassName,
+  style,
+  ...props
+}, ref) => {
+  const {
+    size
+  } = useColorFieldStyleContext();
+  return /*#__PURE__*/_jsx(ColorFieldInputPrimitive, {
+    ref: ref,
+    className: cn(colorFieldInputVariants({
+      size: size ?? 'default'
+    }), className),
+    placeholderTextColorClassName: cn(colorFieldInputPlaceholderVariants(), placeholderTextColorClassName),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'color-field-input'
+    }))
+  });
+});
+ColorFieldInput.displayName = 'ColorField.Input';
+const ColorFieldSlot = /*#__PURE__*/forwardRef(({
+  asChild,
+  position,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(colorFieldSlotVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'color-field-slot'
+    }), positionToDataIcon(position)),
+    children: children
+  });
+});
+ColorFieldSlot.displayName = 'ColorField.Slot';
+export const ColorField = Object.assign(ColorFieldRoot, {
+  Group: ColorFieldGroup,
+  Input: ColorFieldInput,
+  Slot: ColorFieldSlot
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/ColorField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useMemo","View","ColorFieldInput","ColorFieldInputPrimitive","ColorFieldRoot","ColorFieldRootPrimitive","InputRoot","InputRootPrimitive","Slot","dataAttributes","mergeDataAttributes","useColorFieldContext","cn","ParentContext","useParentContext","positionToDataIcon","colorFieldGroupVariants","colorFieldInputPlaceholderVariants","colorFieldInputVariants","colorFieldSlotVariants","colorFieldVariants","jsx","_jsx","SCOPE","useColorFieldStyleContext","variant","size","fullWidth","className","children","style","props","ref","parent","context","Provider","value","slot","displayName","ColorFieldGroup","asChild","inherited","disabled","invalid","readOnly","required","resolvedVariant","resolvedSize","resolvedFullWidth","isDisabled","isInvalid","isReadOnly","isRequired","placeholderTextColorClassName","ColorFieldSlot","position","Comp","ColorField","Object","assign","Group","Input"],"sourceRoot":"../../../../src","sources":["components/ColorField/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ColorField/styles.js

@@ -0,0 +1,10 @@
+"use strict";
+
+import { cva } from '@cdx-ui/utils';
+import { inputFieldPlaceholderVariants, inputFieldVariants, inputRootVariants, inputSlotVariants } from '../Input/styles';
+export const colorFieldVariants = cva('gap-1.5');
+export const colorFieldGroupVariants = inputRootVariants;
+export const colorFieldInputVariants = inputFieldVariants;
+export const colorFieldInputPlaceholderVariants = inputFieldPlaceholderVariants;
+export const colorFieldSlotVariants = inputSlotVariants;
+//# sourceMappingURL=styles.js.map

package/lib/module/components/ColorField/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","inputFieldPlaceholderVariants","inputFieldVariants","inputRootVariants","inputSlotVariants","colorFieldVariants","colorFieldGroupVariants","colorFieldInputVariants","colorFieldInputPlaceholderVariants","colorFieldSlotVariants"],"sourceRoot":"../../../../src","sources":["components/ColorField/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,eAAe;AACnC,SACEC,6BAA6B,EAC7BC,kBAAkB,EAClBC,iBAAiB,EACjBC,iBAAiB,QAEZ,iBAAiB;AAExB,OAAO,MAAMC,kBAAkB,GAAGL,GAAG,CAAC,SAAS,CAAC;AAEhD,OAAO,MAAMM,uBAAuB,GAAGH,iBAAiB;AAExD,OAAO,MAAMI,uBAAuB,GAAGL,kBAAkB;AAEzD,OAAO,MAAMM,kCAAkC,GAAGP,6BAA6B;AAE/E,OAAO,MAAMQ,sBAAsB,GAAGL,iBAAiB","ignoreList":[]}

package/lib/module/components/ColorPicker/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { ColorPickerProvider, ColorPickerRoot as ColorPickerRootPrimitive, ColorPickerRootProvider, ColorPickerTrigger as ColorPickerTriggerPrimitive, dataAttributes, mergeDataAttributes, useColorPickerRootContext } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { PickerPopoverSurface } from '../picker/surfaces';
+import { colorPickerPopoverContentVariants, colorPickerPopoverVariants, colorPickerTriggerVariants, colorPickerVariants } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ColorPickerRoot = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(ColorPickerRootPrimitive, {
+  ref: ref,
+  asChild: asChild,
+  className: cn(colorPickerVariants(), className),
+  style: style,
+  ...props,
+  ...mergeDataAttributes(props, dataAttributes({
+    slot: 'color-picker'
+  })),
+  children: children
+}));
+ColorPickerRoot.displayName = 'ColorPicker';
+const ColorPickerTrigger = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(ColorPickerTriggerPrimitive, {
+  ref: ref,
+  asChild: asChild,
+  className: asChild ? className : cn(colorPickerTriggerVariants(), className),
+  style: style,
+  ...props,
+  ...mergeDataAttributes(props, dataAttributes({
+    slot: 'color-picker-trigger'
+  })),
+  children: children
+}));
+ColorPickerTrigger.displayName = 'ColorPicker.Trigger';
+const registerPopoverSurface = type => {
+  void type;
+};
+function ColorPickerPopover({
+  className,
+  contentClassName,
+  children
+}) {
+  const context = useColorPickerRootContext();
+  return /*#__PURE__*/_jsx(PickerPopoverSurface, {
+    open: context.open,
+    setOpen: context.setOpen,
+    registerSurface: registerPopoverSurface,
+    anchorRef: context.anchorRef,
+    triggerRef: context.triggerRef,
+    className: cn(colorPickerPopoverVariants(), className),
+    contentClassName: cn(colorPickerPopoverContentVariants(), contentClassName),
+    dataSlot: "color-picker-popover",
+    width: "content",
+    children: /*#__PURE__*/_jsx(ColorPickerRootProvider, {
+      value: context,
+      children: /*#__PURE__*/_jsx(ColorPickerProvider, {
+        value: context,
+        children: children
+      })
+    })
+  });
+}
+ColorPickerPopover.displayName = 'ColorPicker.Popover';
+export const ColorPicker = Object.assign(ColorPickerRoot, {
+  Trigger: ColorPickerTrigger,
+  Popover: ColorPickerPopover
+});
+export { parseColor } from '@cdx-ui/primitives';
+//# sourceMappingURL=index.js.map

package/lib/module/components/ColorPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","ColorPickerProvider","ColorPickerRoot","ColorPickerRootPrimitive","ColorPickerRootProvider","ColorPickerTrigger","ColorPickerTriggerPrimitive","dataAttributes","mergeDataAttributes","useColorPickerRootContext","cn","PickerPopoverSurface","colorPickerPopoverContentVariants","colorPickerPopoverVariants","colorPickerTriggerVariants","colorPickerVariants","jsx","_jsx","asChild","className","style","children","props","ref","slot","displayName","registerPopoverSurface","type","ColorPickerPopover","contentClassName","context","open","setOpen","registerSurface","anchorRef","triggerRef","dataSlot","width","value","ColorPicker","Object","assign","Trigger","Popover","parseColor"],"sourceRoot":"../../../../src","sources":["components/ColorPicker/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAElD,SACEC,mBAAmB,EACnBC,eAAe,IAAIC,wBAAwB,EAC3CC,uBAAuB,EACvBC,kBAAkB,IAAIC,2BAA2B,EACjDC,cAAc,EACdC,mBAAmB,EACnBC,yBAAyB,QAGpB,oBAAoB;AAC3B,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,oBAAoB,QAAQ,oBAAoB;AACzD,SACEC,iCAAiC,EACjCC,0BAA0B,EAC1BC,0BAA0B,EAC1BC,mBAAmB,QACd,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlB,MAAMf,eAAe,gBAAGF,UAAU,CAChC,CAAC;EAAEkB,OAAO;EAAEC,SAAS;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,kBACrDN,IAAA,CAACd,wBAAwB;EACvBoB,GAAG,EAAEA,GAAI;EACTL,OAAO,EAAEA,OAAQ;EACjBC,SAAS,EAAET,EAAE,CAACK,mBAAmB,CAAC,CAAC,EAAEI,SAAS,CAAE;EAChDC,KAAK,EAAEA,KAAM;EAAA,GACTE,KAAK;EAAA,GACLd,mBAAmB,CAACc,KAAK,EAAEf,cAAc,CAAC;IAAEiB,IAAI,EAAE;EAAe,CAAC,CAAC,CAAC;EAAAH,QAAA,EAEvEA;AAAQ,CACe,CAE9B,CAAC;AAEDnB,eAAe,CAACuB,WAAW,GAAG,aAAa;AAM3C,MAAMpB,kBAAkB,gBAAGL,UAAU,CACnC,CAAC;EAAEkB,OAAO;EAAEC,SAAS;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,kBACrDN,IAAA,CAACX,2BAA2B;EAC1BiB,GAAG,EAAEA,GAAI;EACTL,OAAO,EAAEA,OAAQ;EACjBC,SAAS,EAAED,OAAO,GAAGC,SAAS,GAAGT,EAAE,CAACI,0BAA0B,CAAC,CAAC,EAAEK,SAAS,CAAE;EAC7EC,KAAK,EAAEA,KAAM;EAAA,GACTE,KAAK;EAAA,GACLd,mBAAmB,CAACc,KAAK,EAAEf,cAAc,CAAC;IAAEiB,IAAI,EAAE;EAAuB,CAAC,CAAC,CAAC;EAAAH,QAAA,EAE/EA;AAAQ,CACkB,CAEjC,CAAC;AAEDhB,kBAAkB,CAACoB,WAAW,GAAG,qBAAqB;AAQtD,MAAMC,sBAAsB,GAAIC,IAAe,IAAK;EAClD,KAAKA,IAAI;AACX,CAAC;AAED,SAASC,kBAAkBA,CAAC;EAAET,SAAS;EAAEU,gBAAgB;EAAER;AAAkC,CAAC,EAAE;EAC9F,MAAMS,OAAO,GAAGrB,yBAAyB,CAAC,CAAC;EAE3C,oBACEQ,IAAA,CAACN,oBAAoB;IACnBoB,IAAI,EAAED,OAAO,CAACC,IAAK;IACnBC,OAAO,EAAEF,OAAO,CAACE,OAAQ;IACzBC,eAAe,EAAEP,sBAAuB;IACxCQ,SAAS,EAAEJ,OAAO,CAACI,SAAU;IAC7BC,UAAU,EAAEL,OAAO,CAACK,UAAW;IAC/BhB,SAAS,EAAET,EAAE,CAACG,0BAA0B,CAAC,CAAC,EAAEM,SAAS,CAAE;IACvDU,gBAAgB,EAAEnB,EAAE,CAACE,iCAAiC,CAAC,CAAC,EAAEiB,gBAAgB,CAAE;IAC5EO,QAAQ,EAAC,sBAAsB;IAC/BC,KAAK,EAAC,SAAS;IAAAhB,QAAA,eAEfJ,IAAA,CAACb,uBAAuB;MAACkC,KAAK,EAAER,OAAQ;MAAAT,QAAA,eACtCJ,IAAA,CAAChB,mBAAmB;QAACqC,KAAK,EAAER,OAAQ;QAAAT,QAAA,EAAEA;MAAQ,CAAsB;IAAC,CAC9C;EAAC,CACN,CAAC;AAE3B;AAEAO,kBAAkB,CAACH,WAAW,GAAG,qBAAqB;AAOtD,OAAO,MAAMc,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACvC,eAAe,EAAE;EACxDwC,OAAO,EAAErC,kBAAkB;EAC3BsC,OAAO,EAAEf;AACX,CAAC,CAAiC;AAElC,SAASgB,UAAU,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/components/ColorPicker/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import { Platform } from 'react-native';
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+export const colorPickerVariants = cva(['items-start gap-2']);
+export const colorPickerTriggerVariants = cva(['h-10 self-start flex-row items-center justify-center gap-2 px-3', 'rounded-[var(--border-radius-button)]', 'border border-stroke-action bg-transparent', TRANSITION_COLORS, 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, 'web:outline-none web:focus:outline-none web:focus-visible:outline-none', 'web:data-[focus-visible=true]:ring-2', 'web:data-[focus-visible=true]:ring-stroke-focus', 'web:data-[focus-visible=true]:ring-offset-2', Platform.select({
+  default: 'data-[active=true]:bg-surface-action-tint-active',
+  web: ['data-[hover=true]:bg-surface-action-tint-hover', 'data-[active=true]:data-[hover=true]:bg-surface-action-tint-active'].join(' ')
+})]);
+
+/**
+ * Padding lives on the scroll content, not the popover: the popover's `ScrollView` clips at its
+ * own bounds, and slider/area thumbs overhang their track ends by half a thumb plus shadow.
+ */
+export const colorPickerPopoverVariants = cva(['w-80 p-0']);
+export const colorPickerPopoverContentVariants = cva(['gap-3 p-4']);
+//# sourceMappingURL=styles.js.map

package/lib/module/components/ColorPicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","cva","DISABLED_CURSOR","TRANSITION_COLORS","colorPickerVariants","colorPickerTriggerVariants","select","default","web","join","colorPickerPopoverVariants","colorPickerPopoverContentVariants"],"sourceRoot":"../../../../src","sources":["components/ColorPicker/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,wBAAwB;AAE3E,OAAO,MAAMC,mBAAmB,GAAGH,GAAG,CAAC,CAAC,mBAAmB,CAAC,CAAC;AAE7D,OAAO,MAAMI,0BAA0B,GAAGJ,GAAG,CAAC,CAC5C,iEAAiE,EACjE,uCAAuC,EACvC,4CAA4C,EAC5CE,iBAAiB,EACjB,wDAAwD,EACxDD,eAAe,EACf,wEAAwE,EACxE,sCAAsC,EACtC,iDAAiD,EACjD,6CAA6C,EAC7CF,QAAQ,CAACM,MAAM,CAAC;EACdC,OAAO,EAAE,kDAAkD;EAC3DC,GAAG,EAAE,CACH,gDAAgD,EAChD,oEAAoE,CACrE,CAACC,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;;AAEF;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAGT,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;AAE3D,OAAO,MAAMU,iCAAiC,GAAGV,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/ColorSlider/ColorSliderRailPaint.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import { useId } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Defs, LinearGradient, Rect, Stop, Svg } from 'react-native-svg';
+import { useColorSliderContext } from '@cdx-ui/primitives';
+import { colorSliderRailPaintVariants } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getStopOffset(index, count, railSize, endCap) {
+  const ratio = index / (count - 1);
+  if (railSize <= 0 || endCap <= 0) {
+    return `${String(ratio * 100)}%`;
+  }
+  return `${String((endCap + ratio * railSize) / (railSize + 2 * endCap) * 100)}%`;
+}
+export function ColorSliderRailPaint() {
+  const {
+    gradientColors,
+    orientation,
+    layout,
+    thumbSize
+  } = useColorSliderContext();
+  const gradientId = useId();
+  const isVertical = orientation === 'vertical';
+  const railSize = (isVertical ? layout?.height : layout?.width) ?? 0;
+  const endCap = (isVertical ? thumbSize.height : thumbSize.width) / 2;
+  return /*#__PURE__*/_jsx(View, {
+    className: colorSliderRailPaintVariants({
+      orientation
+    }),
+    style: styles.paint,
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: "100%",
+      height: "100%",
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsx(LinearGradient, {
+          id: gradientId,
+          x1: "0%",
+          y1: orientation === 'vertical' ? '100%' : '0%',
+          x2: orientation === 'horizontal' ? '100%' : '0%',
+          y2: "0%",
+          children: gradientColors.map((color, index) => /*#__PURE__*/_jsx(Stop, {
+            offset: getStopOffset(index, gradientColors.length, railSize, endCap),
+            stopColor: color
+          }, `${color}-${String(index)}`))
+        })
+      }), /*#__PURE__*/_jsx(Rect, {
+        width: "100%",
+        height: "100%",
+        fill: `url(#${gradientId})`
+      })]
+    })
+  });
+}
+ColorSliderRailPaint.displayName = 'ColorSliderRailPaint';
+const styles = StyleSheet.create({
+  paint: {
+    pointerEvents: 'none'
+  }
+});
+//# sourceMappingURL=ColorSliderRailPaint.js.map

package/lib/module/components/ColorSlider/ColorSliderRailPaint.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useId","StyleSheet","View","Defs","LinearGradient","Rect","Stop","Svg","useColorSliderContext","colorSliderRailPaintVariants","jsx","_jsx","jsxs","_jsxs","getStopOffset","index","count","railSize","endCap","ratio","String","ColorSliderRailPaint","gradientColors","orientation","layout","thumbSize","gradientId","isVertical","height","width","className","style","styles","paint","accessible","accessibilityElementsHidden","importantForAccessibility","children","id","x1","y1","x2","y2","map","color","offset","length","stopColor","fill","displayName","create","pointerEvents"],"sourceRoot":"../../../../src","sources":["components/ColorSlider/ColorSliderRailPaint.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ColorSlider/ColorSliderRailPaint.web.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { View } from 'react-native';
+import { useColorSliderContext } from '@cdx-ui/primitives';
+import { colorSliderRailPaintVariants } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+function getGradientStops(colors, endCap) {
+  if (endCap <= 0 || colors.length < 2) {
+    return colors.join(', ');
+  }
+  const first = `${colors[0]} ${String(endCap)}px`;
+  const last = `${colors[colors.length - 1]} calc(100% - ${String(endCap)}px)`;
+  return [first, ...colors.slice(1, -1), last].join(', ');
+}
+export function ColorSliderRailPaint() {
+  const {
+    gradientColors,
+    orientation,
+    thumbSize
+  } = useColorSliderContext();
+  const direction = orientation === 'vertical' ? 'to top' : 'to right';
+  const endCap = (orientation === 'vertical' ? thumbSize.height : thumbSize.width) / 2;
+  const paintStyle = {
+    backgroundImage: `linear-gradient(${direction}, ${getGradientStops(gradientColors, endCap)})`
+  };
+  return /*#__PURE__*/_jsx(View, {
+    className: colorSliderRailPaintVariants({
+      orientation
+    }),
+    style: paintStyle,
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  });
+}
+ColorSliderRailPaint.displayName = 'ColorSliderRailPaint';
+//# sourceMappingURL=ColorSliderRailPaint.web.js.map

package/lib/module/components/ColorSlider/ColorSliderRailPaint.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","useColorSliderContext","colorSliderRailPaintVariants","jsx","_jsx","getGradientStops","colors","endCap","length","join","first","String","last","slice","ColorSliderRailPaint","gradientColors","orientation","thumbSize","direction","height","width","paintStyle","backgroundImage","className","style","accessible","accessibilityElementsHidden","importantForAccessibility","displayName"],"sourceRoot":"../../../../src","sources":["components/ColorSlider/ColorSliderRailPaint.web.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAwB,cAAc;AACnD,SAASC,qBAAqB,QAAQ,oBAAoB;AAC1D,SAASC,4BAA4B,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExD,SAASC,gBAAgBA,CAACC,MAAyB,EAAEC,MAAc,EAAU;EAC3E,IAAIA,MAAM,IAAI,CAAC,IAAID,MAAM,CAACE,MAAM,GAAG,CAAC,EAAE;IACpC,OAAOF,MAAM,CAACG,IAAI,CAAC,IAAI,CAAC;EAC1B;EACA,MAAMC,KAAK,GAAG,GAAGJ,MAAM,CAAC,CAAC,CAAC,IAAIK,MAAM,CAACJ,MAAM,CAAC,IAAI;EAChD,MAAMK,IAAI,GAAG,GAAGN,MAAM,CAACA,MAAM,CAACE,MAAM,GAAG,CAAC,CAAC,gBAAgBG,MAAM,CAACJ,MAAM,CAAC,KAAK;EAC5E,OAAO,CAACG,KAAK,EAAE,GAAGJ,MAAM,CAACO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAED,IAAI,CAAC,CAACH,IAAI,CAAC,IAAI,CAAC;AACzD;AAEA,OAAO,SAASK,oBAAoBA,CAAA,EAAG;EACrC,MAAM;IAAEC,cAAc;IAAEC,WAAW;IAAEC;EAAU,CAAC,GAAGhB,qBAAqB,CAAC,CAAC;EAC1E,MAAMiB,SAAS,GAAGF,WAAW,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU;EACpE,MAAMT,MAAM,GAAG,CAACS,WAAW,KAAK,UAAU,GAAGC,SAAS,CAACE,MAAM,GAAGF,SAAS,CAACG,KAAK,IAAI,CAAC;EACpF,MAAMC,UAAU,GAAG;IACjBC,eAAe,EAAE,mBAAmBJ,SAAS,KAAKb,gBAAgB,CAACU,cAAc,EAAER,MAAM,CAAC;EAC5F,CAAyB;EAEzB,oBACEH,IAAA,CAACJ,IAAI;IACHuB,SAAS,EAAErB,4BAA4B,CAAC;MAAEc;IAAY,CAAC,CAAE;IACzDQ,KAAK,EAAEH,UAAW;IAClBI,UAAU,EAAE,KAAM;IAClBC,2BAA2B;IAC3BC,yBAAyB,EAAC;EAAqB,CAChD,CAAC;AAEN;AAEAb,oBAAoB,CAACc,WAAW,GAAG,sBAAsB","ignoreList":[]}

package/lib/module/components/ColorSlider/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { Text } from 'react-native';
+import { ColorSliderRail as ColorSliderRailPrimitive, ColorSliderRoot as ColorSliderRootPrimitive, ColorSliderThumb as ColorSliderThumbPrimitive, Slot, dataAttributes, mergeDataAttributes, useColorSliderContext } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { ColorSliderRailPaint } from './ColorSliderRailPaint';
+import { colorSliderOutputVariants, colorSliderRailVariants, colorSliderThumbVariants, colorSliderVariants } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ColorSliderRoot = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  orientation = 'horizontal',
+  children,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(ColorSliderRootPrimitive, {
+  ref: ref,
+  asChild: asChild,
+  className: cn(colorSliderVariants({
+    orientation
+  }), className),
+  style: style,
+  orientation: orientation,
+  ...props,
+  ...mergeDataAttributes(props, dataAttributes({
+    slot: 'color-slider'
+  })),
+  children: children
+}));
+ColorSliderRoot.displayName = 'ColorSlider';
+const ColorSliderRail = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  hitSlop,
+  children,
+  ...props
+}, ref) => {
+  const {
+    orientation,
+    thumbSize
+  } = useColorSliderContext();
+  const endCap = orientation === 'vertical' ? {
+    top: thumbSize.height / 2,
+    bottom: thumbSize.height / 2
+  } : {
+    left: thumbSize.width / 2,
+    right: thumbSize.width / 2
+  };
+  return /*#__PURE__*/_jsxs(ColorSliderRailPrimitive, {
+    ref: ref,
+    asChild: asChild,
+    className: cn(colorSliderRailVariants({
+      orientation
+    }), className),
+    style: style,
+    hitSlop: hitSlop ?? endCap,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'color-slider-rail'
+    })),
+    children: [/*#__PURE__*/_jsx(ColorSliderRailPaint, {}), children]
+  });
+});
+ColorSliderRail.displayName = 'ColorSlider.Rail';
+const ColorSliderThumb = /*#__PURE__*/forwardRef(({
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const {
+    value
+  } = useColorSliderContext();
+  const fillStyle = {
+    backgroundColor: value.toString('hex')
+  };
+  return /*#__PURE__*/_jsx(ColorSliderThumbPrimitive, {
+    ref: ref,
+    className: cn(colorSliderThumbVariants(), className),
+    style: typeof style === 'function' ? state => [fillStyle, style(state)] : [fillStyle, style],
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'color-slider-thumb'
+    })),
+    children: children
+  });
+});
+ColorSliderThumb.displayName = 'ColorSlider.Thumb';
+const ColorSliderOutput = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const {
+    valueLabel
+  } = useColorSliderContext();
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(colorSliderOutputVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'color-slider-output'
+    })),
+    children: children ?? valueLabel
+  });
+});
+ColorSliderOutput.displayName = 'ColorSlider.Output';
+export const ColorSlider = Object.assign(ColorSliderRoot, {
+  Rail: ColorSliderRail,
+  Thumb: ColorSliderThumb,
+  Output: ColorSliderOutput
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/ColorSlider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","Text","ColorSliderRail","ColorSliderRailPrimitive","ColorSliderRoot","ColorSliderRootPrimitive","ColorSliderThumb","ColorSliderThumbPrimitive","Slot","dataAttributes","mergeDataAttributes","useColorSliderContext","cn","ColorSliderRailPaint","colorSliderOutputVariants","colorSliderRailVariants","colorSliderThumbVariants","colorSliderVariants","jsx","_jsx","jsxs","_jsxs","asChild","className","style","orientation","children","props","ref","slot","displayName","hitSlop","thumbSize","endCap","top","height","bottom","left","width","right","value","fillStyle","backgroundColor","toString","state","ColorSliderOutput","valueLabel","Comp","ColorSlider","Object","assign","Rail","Thumb","Output"],"sourceRoot":"../../../../src","sources":["components/ColorSlider/index.tsx"],"mappings":"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","ignoreList":[]}