@functionalui/functionalui 0.2.1 → 0.2.3

package/dist/input-image/index.mjs

@@ -0,0 +1,106 @@
+"use client";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { C as n } from "../component-C1Gs4nVu.js";
+import { L as d } from "../component-DRXQXr2G.js";
+import { T as L } from "../component-BvHdlcdE.js";
+import { U as g } from "../UIcon-BHzbeYWw.js";
+import { S as _ } from "../generics-C-WSPclF.js";
+import { h as w, b as R } from "../classes-CVxy1f4M.js";
+import { useState as v, useEffect as S } from "react";
+const F = "_iconContainerDesktop_1wxn3_25", M = "_iconContainerMobile_1wxn3_34", U = {
+  iconContainerDesktop: F,
+  iconContainerMobile: M
+}, z = ({
+  id: s,
+  name: p,
+  handleImageChange: i,
+  labelname: f,
+  defaultValue: o,
+  width: h = "100%",
+  height: x,
+  ref: y,
+  ...C
+}) => {
+  const [c, b] = v(), [a, l] = v(o);
+  S(() => {
+    if (o && o !== "") {
+      l(o);
+      return;
+    } else if (!c) return;
+    const t = URL.createObjectURL(c);
+    return l(t), () => {
+      var r;
+      if (t !== "")
+        r = t;
+      else if (c && a)
+        r = a;
+      else return;
+      try {
+        URL.revokeObjectURL(r);
+      } catch {
+      }
+    };
+  }, [o, c]);
+  const j = async (t) => {
+    if (!t.target.files || t.target.files.length === 0) return;
+    b(t.target.files[0]);
+    const r = URL.createObjectURL(t.target.files[0]);
+    l(r), i && i(t.target.files[0]);
+  }, u = () => {
+    b(void 0), l(void 0), i && i(void 0);
+  };
+  return /* @__PURE__ */ m(n, { children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        id: s,
+        ref: y,
+        type: "file",
+        name: p,
+        onChange: j,
+        accept: "image/png, image/jpeg, image/webp, image/jpg",
+        style: {
+          opacity: 0,
+          pointerEvents: "none",
+          width: 0,
+          height: 0,
+          position: "absolute"
+        },
+        ...C
+      }
+    ),
+    /* @__PURE__ */ e(
+      "label",
+      {
+        htmlFor: s,
+        onMouseEnter: () => {
+        },
+        onMouseLeave: () => {
+        },
+        style: { width: h, height: x, cursor: "pointer" },
+        children: a ? /* @__PURE__ */ e(
+          k,
+          {
+            src: a,
+            width: h,
+            handleCancel: u
+          }
+        ) : /* @__PURE__ */ m(d, { display: R.Flex, flexAlignItem: w.Center, children: [
+          /* @__PURE__ */ e(n, { marginRight: _.Size1, children: /* @__PURE__ */ e(L, { children: f || "Upload image" }) }),
+          /* @__PURE__ */ e(n, { className: `${U.iconContainerDesktop}`, children: /* @__PURE__ */ e(g, { name: "image" }) }),
+          /* @__PURE__ */ e(n, { className: `${U.iconContainerMobile}`, children: /* @__PURE__ */ e(g, { name: "camera" }) })
+        ] })
+      }
+    )
+  ] });
+}, k = ({
+  src: s,
+  width: p,
+  handleCancel: i
+}) => /* @__PURE__ */ m(d, { children: [
+  /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("img", { alt: "preview", src: s, width: p }) }),
+  /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(g, { name: "x", iconAction: () => i() }) })
+] });
+export {
+  z as InputImage
+};

package/dist/input-text/index.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../component-D-EEi7NI.cjs"),$=require("../component-B6F6g6i4.cjs"),c=require("../generics-DE1oV0MV.cjs"),w=require("../generics-9F1CmKPb.cjs"),F=require("../values-D-Y_dNaF.cjs"),e=require("../icons-DSpaHhtT.cjs"),T=require("react"),A=require("../useCombinedRef-DZxHQ7PL.cjs"),G=require("../LabelText-BUslE9cx.cjs"),L=require("../UIcon-B5rpDmHC.cjs"),H=require("../generics-nyvJhwQE.cjs"),V=require("../component-Bh3EPTN0.cjs"),J=({inputHelper:o})=>{const[s,r]=T.useState(!1);return t.jsxs(d.Container,{style:{position:"absolute",top:"50%",right:-10,transform:"translateY(-25%)"},onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),children:[t.jsx(L.UIcon,{name:"info",size:H.Sizings.Size2,colorLight:c.ColorPalettes.Primary5,colorDark:c.ColorPalettes.Primary5}),t.jsx(d.Container,{style:{position:"relative",pointerEvents:"none"},children:t.jsx(G.LabelText,{labelName:o,hover:s,x:0,y:0})})]})},K="_inputtext_rg89u_1",Q="_showHidePassword_rg89u_41",q={inputtext:K,showHidePassword:Q},ee=({isShow:o,handleShowHideText:s})=>t.jsx(d.Container,{className:q.showHidePassword,style:{position:"absolute",bottom:".75rem",left:"88%",zIndex:4,cursor:"pointer"},onClick:()=>s(),children:t.jsx(L.UIcon,{name:o?e.Icons.EyeOff:e.Icons.Eye,size:H.Sizings.Size3,colorLight:c.ColorPalettes.Primary5,colorDark:c.ColorPalettes.Primary5,cursor:w.Cursors.Pointer})}),te=({id:o,label:s,size:r,labelTextColor:i,inputColor:n})=>t.jsx(d.Container,{paddingLeft:e.INPUT_TEXT_SIZE[r].paddings.left,paddingBottom:e.INPUT_TEXT_SIZE[r].paddings.bottom,children:t.jsx("label",{htmlFor:o,children:t.jsx(V.Text_Span,{fontWeight:w.FontWeights.Size3,paletteColor:i&&typeof i=="boolean"?e.INPUT_TEXT_COLOR[n].labelColor:c.ColorPalettes.Grey10,fontSize:e.INPUT_TEXT_SIZE[r].font.size,children:s})})}),oe=({id:o,name:s,type:r=e.InputTextTypes.Text,value:i,modes:n=e.InputTextModes.Default,label:f,focus:p,required:_,width:I,fullWidth:S,helperText:x,placeholder:E="Insert text",step:v,min:O,handleChange:b,handleFocus:g,handleBlur:y,handleCheck:m,size:u=e.InputTextSizes.Default,inputStyle:P=e.InputTextStyles.Default,inputColor:h=c.ColorSets.Primarys,labelTextColor:R=!0,transparent:N,ref:Z,...D})=>{const a=T.useRef(null),B=A.useCombinedRef(a,Z);T.useEffect(()=>{if(n!==e.InputTextModes.Disabled){if(p){a.current&&a.current.focus();return}i!==""&&a.current&&a.current.value}},[p,n,i]);const[M,U]=T.useState(r),[C,z]=T.useState(!1),k=()=>{z(l=>!l)};T.useEffect(()=>{r===e.InputTextTypes.Password&&U(C?e.InputTextTypes.Text:e.InputTextTypes.Password)},[C]);const W=l=>{b&&b(l)},Y=T.useCallback(async l=>{l.preventDefault();const X=l.target.value.trim();if(!(!X||X!=="")){y&&y(),m&&await m();return}},[y,m]),j=T.useCallback(()=>{if(n!==e.InputTextModes.Disabled)return a.current&&a.current.focus(),g&&g(),!0},[g,n]);return t.jsxs(d.Container,{style:{width:S?"100%":I||350,position:"relative"},children:[!N&&t.jsx(te,{id:o,label:f,inputColor:h,size:u,labelTextColor:R}),t.jsxs(d.Container,{boxSizing:w.BoxSizings.BorderBox,...re(P,N),borderColor:e.INPUT_TEXT_COLOR[h].borderColor,paddingLeft:e.INPUT_TEXT_SIZE[u].paddings.left,paddingRight:e.INPUT_TEXT_SIZE[u].paddings.right,paddingTop:e.INPUT_TEXT_SIZE[u].paddings.top,paddingBottom:e.INPUT_TEXT_SIZE[u].paddings.bottom,style:{paddingTop:P!==e.InputTextStyles.Outlined?1:"",paddingBottom:P!==e.InputTextStyles.Outlined?F.SPACING_VALUES[e.INPUT_TEXT_SIZE[u].paddings.bottom]:"",display:P!==e.InputTextStyles.Outlined?"flex":"block",cursor:"text"},onClick:()=>j(),children:[t.jsx($.F__TextInput,{ref:B,type:M,required:_,disabled:n!==e.InputTextModes.Disabled?void 0:!0,fontSize:e.INPUT_TEXT_SIZE[u].font.size,fontWeight:e.INPUT_TEXT_SIZE[u].font.weight,color:e.INPUT_TEXT_COLOR[h].fontColor,placeholder:E,id:o,name:s,value:i,min:O,step:v,onChange:b?W:void 0,onFocus:j,onBlur:Y,className:q.inputtext,...D}),r===e.InputTextTypes.Password&&t.jsx(ee,{isShow:C,handleShowHideText:k}),x&&t.jsx(J,{inputHelper:x})]})]})},re=(o,s=!1)=>{var r,i,n,f,p,_,I,S,x,E;return s?{}:{borderBottomStyle:(n=(i=(r=e.INPUT_TEXT_STYLE[o])==null?void 0:r.borders)==null?void 0:i.bottom)==null?void 0:n.style,borderWidth:(p=(f=e.INPUT_TEXT_STYLE[o])==null?void 0:f.borders)==null?void 0:p.width,borderRadius:(I=(_=e.INPUT_TEXT_STYLE[o])==null?void 0:_.borders)==null?void 0:I.radius,borderStyle:(E=(x=(S=e.INPUT_TEXT_STYLE[o])==null?void 0:S.borders)==null?void 0:x.borders)==null?void 0:E.style}};exports.InputText=oe;

package/dist/input-text/index.d.ts

@@ -0,0 +1,199 @@
+import { ChangeEvent } from 'react';
+import { HTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { RefObject } from 'react';
+
+declare enum ColorPalettes {
+    Transparent = 1,// (0, 1)
+    Grey1 = 2,
+    Grey2 = 3,
+    Grey3 = 4,
+    Grey4 = 5,
+    Grey5 = 6,
+    Grey6 = 7,
+    Grey7 = 8,
+    Grey8 = 9,
+    Grey9 = 10,
+    Grey10 = 11,// (2, 11)
+    Primary1 = 12,
+    Primary2 = 13,
+    Primary3 = 14,
+    Primary4 = 15,
+    Primary5 = 16,
+    Primary6 = 17,
+    Primary7 = 18,
+    Primary8 = 19,
+    Primary9 = 20,// (12, 20)
+    Secondary1 = 21,
+    Secondary2 = 22,
+    Secondary3 = 23,
+    Secondary4 = 24,
+    Secondary5 = 25,
+    Secondary6 = 26,
+    Secondary7 = 27,
+    Secondary8 = 28,
+    Secondary9 = 29,// (21, 29)
+    Red1 = 30,
+    Red2 = 31,
+    Red3 = 32,
+    Red4 = 33,
+    Red5 = 34,
+    Red6 = 35,
+    Red7 = 36,
+    Red8 = 37,
+    Red9 = 38,// (30, 38)
+    Green1 = 39,
+    Green2 = 40,
+    Green3 = 41,
+    Green4 = 42,
+    Green5 = 43,
+    Green6 = 44,
+    Green7 = 45,
+    Green8 = 46,
+    Green9 = 47,// (39, 47)
+    Blue1 = 48,
+    Blue2 = 49,
+    Blue3 = 50,
+    Blue4 = 51,
+    Blue5 = 52,
+    Blue6 = 53,
+    Blue7 = 54,
+    Blue8 = 55,
+    Blue9 = 56,// (48, 56)
+    Yellow1 = 57,
+    Yellow2 = 58,
+    Yellow3 = 59,
+    Yellow4 = 60,
+    Yellow5 = 61,
+    Yellow6 = 62,
+    Yellow7 = 63,
+    Yellow8 = 64,
+    Yellow9 = 65,// (57, 65)
+    Accent1_1 = 66,
+    Accent1_2 = 67,
+    Accent1_3 = 68,
+    Accent1_4 = 69,
+    Accent1_5 = 70,
+    Accent1_6 = 71,
+    Accent1_7 = 72,
+    Accent1_8 = 73,
+    Accent1_9 = 74,// (57, 65)
+    Accent2_1 = 75,
+    Accent2_2 = 76,
+    Accent2_3 = 77,
+    Accent2_4 = 78,
+    Accent2_5 = 79,
+    Accent2_6 = 80,
+    Accent2_7 = 81,
+    Accent2_8 = 82,
+    Accent2_9 = 83
+}
+
+declare enum ColorSets {
+    Transparents = 1,
+    Greys = 2,
+    Primarys = 3,
+    Secondarys = 4,
+    Reds = 5,
+    Greens = 6,
+    Blues = 7,
+    Yellows = 8,
+    Accents1 = 9,
+    Accents2 = 10
+}
+
+declare enum FontSizes {
+    Size1 = 1,
+    Size2 = 2,
+    Size3 = 3,
+    Size4 = 4,
+    Size5 = 5,
+    Size6 = 6,
+    Size7 = 7,
+    Size8 = 8,
+    Size9 = 9,
+    Size10 = 10
+}
+
+declare enum FontWeights {
+    Size1 = 1,
+    Size2 = 2,
+    Size3 = 3,
+    Size4 = 4,
+    Size5 = 5,
+    Size6 = 6
+}
+
+export declare const InputText: ({ id, name, type, value, modes, label, focus, required, width, fullWidth, helperText, placeholder, step, min, handleChange, handleFocus, handleBlur, handleCheck, size, inputStyle, inputColor, labelTextColor, transparent, ref, ...props }: P) => JSX.Element;
+
+declare enum InputTextModes {
+    Default = 1,
+    Error = 2,
+    Disabled = 3,
+    ReadOnly = 4
+}
+
+/**
+ * text size
+ * label size
+ * padding left right
+ * padding top bottom
+ * border width
+ */
+declare enum InputTextSizes {
+    Small = 1,
+    Default = 2,// medium
+    Big = 3,
+    Huge = 4
+}
+
+declare enum InputTextStyles {
+    Default = 1,// border bottom
+    Outlined = 2,// outline overall
+    Filled = 3
+}
+
+declare enum InputTextTypes {
+    Text = "text",
+    Number = "number",
+    Password = "password"
+}
+
+/**
+ * icon on left or right side
+ */
+declare interface P extends HTMLAttributes<HTMLInputElement> {
+    id: string;
+    name: string;
+    type?: InputTextTypes;
+    value?: any;
+    modes?: InputTextModes;
+    label: string;
+    focus?: boolean;
+    width?: number | string;
+    required?: boolean;
+    fullWidth?: boolean;
+    placeholder?: string;
+    helperText?: string;
+    step?: number;
+    min?: number;
+    handleChange?: (v: ChangeEvent<HTMLInputElement>) => void;
+    handleFocus?: (v?: any) => void;
+    handleBlur?: (v?: any) => void;
+    handleCheck?: (v?: any) => Promise<any> | void;
+    fontColor?: ColorPalettes;
+    fontWeight?: FontWeights;
+    fontSize?: FontSizes;
+    size?: InputTextSizes;
+    inputStyle?: InputTextStyles;
+    inputColor?: ColorSets;
+    /**
+     * colors
+     * - border color, input text color, label color, icon color
+     */
+    labelTextColor?: boolean | ColorPalettes;
+    transparent?: boolean;
+    ref?: RefObject<HTMLInputElement | null>;
+}
+
+export { }

package/dist/input-text/index.mjs

@@ -0,0 +1,246 @@
+"use client";
+import { jsxs as L, jsx as e } from "react/jsx-runtime";
+import { C as f } from "../component-C1Gs4nVu.js";
+import { F as tt } from "../component-CBIQe7z5.js";
+import { C as b, a as ot } from "../generics-D33J7ILI.js";
+import { C as et, f as rt, c as st } from "../generics-C-WSPclF.js";
+import { S as nt } from "../values-B5r2bYNJ.js";
+import { c as z, a as s, I as D, e as S, h as m, f as it, g as y, b as I } from "../icons-B8R1UT86.js";
+import { useState as B, useRef as at, useEffect as W, useCallback as k } from "react";
+import { u as dt } from "../useCombinedRef-COuiqHjO.js";
+import { L as lt } from "../LabelText-D7QIWtWj.js";
+import { U as F } from "../UIcon-BHzbeYWw.js";
+import { S as M } from "../generics-BrMr2-Gs.js";
+import { T as ft } from "../component-BvHdlcdE.js";
+const ut = ({ inputHelper: t }) => {
+  const [n, o] = B(!1);
+  return /* @__PURE__ */ L(
+    f,
+    {
+      style: {
+        position: "absolute",
+        top: "50%",
+        right: -10,
+        transform: "translateY(-25%)"
+      },
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
+      children: [
+        /* @__PURE__ */ e(
+          F,
+          {
+            name: "info",
+            size: M.Size2,
+            colorLight: b.Primary5,
+            colorDark: b.Primary5
+          }
+        ),
+        /* @__PURE__ */ e(f, { style: { position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ e(lt, { labelName: t, hover: n, x: 0, y: 0 }) })
+      ]
+    }
+  );
+}, pt = "_inputtext_rg89u_1", ct = "_showHidePassword_rg89u_41", X = {
+  inputtext: pt,
+  showHidePassword: ct
+}, mt = ({ isShow: t, handleShowHideText: n }) => /* @__PURE__ */ e(
+  f,
+  {
+    className: X.showHidePassword,
+    style: {
+      position: "absolute",
+      bottom: ".75rem",
+      left: "88%",
+      zIndex: 4,
+      cursor: "pointer"
+    },
+    onClick: () => n(),
+    children: /* @__PURE__ */ e(
+      F,
+      {
+        name: t ? z.EyeOff : z.Eye,
+        size: M.Size3,
+        colorLight: b.Primary5,
+        colorDark: b.Primary5,
+        cursor: et.Pointer
+      }
+    )
+  }
+), bt = ({
+  id: t,
+  label: n,
+  size: o,
+  labelTextColor: i,
+  inputColor: r
+}) => /* @__PURE__ */ e(
+  f,
+  {
+    paddingLeft: s[o].paddings.left,
+    paddingBottom: s[o].paddings.bottom,
+    children: /* @__PURE__ */ e("label", { htmlFor: t, children: /* @__PURE__ */ e(
+      ft,
+      {
+        fontWeight: rt.Size3,
+        paletteColor: i && typeof i == "boolean" ? D[r].labelColor : b.Grey10,
+        fontSize: s[o].font.size,
+        children: n
+      }
+    ) })
+  }
+), Lt = ({
+  // required
+  id: t,
+  name: n,
+  type: o = m.Text,
+  value: i,
+  modes: r = S.Default,
+  label: g,
+  // optional properties
+  focus: u,
+  required: T,
+  width: p,
+  fullWidth: x,
+  helperText: c,
+  placeholder: h = "Insert text",
+  // other types property
+  step: j,
+  min: A,
+  // methods
+  handleChange: P,
+  handleFocus: _,
+  handleBlur: H,
+  handleCheck: C,
+  // styling
+  size: a = it.Default,
+  inputStyle: w = y.Default,
+  inputColor: v = ot.Primarys,
+  // customizations
+  labelTextColor: G = !0,
+  transparent: N,
+  ref: Y,
+  ...V
+}) => {
+  const d = at(null), Z = dt(d, Y);
+  W(() => {
+    if (r !== S.Disabled) {
+      if (u) {
+        d.current && d.current.focus();
+        return;
+      }
+      i !== "" && d.current && d.current.value;
+    }
+  }, [u, r, i]);
+  const [q, R] = B(o), [E, J] = B(!1), K = () => {
+    J((l) => !l);
+  };
+  W(() => {
+    o === m.Password && R(E ? m.Text : m.Password);
+  }, [E]);
+  const Q = (l) => {
+    P && P(l);
+  }, $ = k(
+    async (l) => {
+      l.preventDefault();
+      const U = l.target.value.trim();
+      if (!(!U || U !== "")) {
+        H && H(), C && await C();
+        return;
+      }
+    },
+    [H, C]
+  ), O = k(() => {
+    if (r !== S.Disabled)
+      return d.current && d.current.focus(), _ && _(), !0;
+  }, [_, r]);
+  return /* @__PURE__ */ L(
+    f,
+    {
+      style: {
+        width: x ? "100%" : p || 350,
+        position: "relative"
+        // to label
+      },
+      children: [
+        !N && /* @__PURE__ */ e(
+          bt,
+          {
+            id: t,
+            label: g,
+            inputColor: v,
+            size: a,
+            labelTextColor: G
+          }
+        ),
+        /* @__PURE__ */ L(
+          f,
+          {
+            boxSizing: st.BorderBox,
+            ...gt(w, N),
+            borderColor: D[v].borderColor,
+            paddingLeft: s[a].paddings.left,
+            paddingRight: s[a].paddings.right,
+            paddingTop: s[a].paddings.top,
+            paddingBottom: s[a].paddings.bottom,
+            style: {
+              // position: "relative",
+              // width: fullWidth ? "100%" : width ? width : 350,
+              paddingTop: w !== y.Outlined ? 1 : "",
+              paddingBottom: w !== y.Outlined ? nt[s[a].paddings.bottom] : "",
+              // display: size === InputTextSizes.Small ? "flex" : "block",
+              display: w !== y.Outlined ? "flex" : "block",
+              cursor: "text"
+            },
+            onClick: () => O(),
+            children: [
+              /* @__PURE__ */ e(
+                tt,
+                {
+                  ref: Z,
+                  type: q,
+                  required: T,
+                  disabled: r !== S.Disabled ? void 0 : !0,
+                  fontSize: s[a].font.size,
+                  fontWeight: s[a].font.weight,
+                  color: D[v].fontColor,
+                  placeholder: h,
+                  id: t,
+                  name: n,
+                  value: i,
+                  min: A,
+                  step: j,
+                  onChange: P ? Q : void 0,
+                  onFocus: O,
+                  onBlur: $,
+                  className: X.inputtext,
+                  ...V
+                }
+              ),
+              o === m.Password && /* @__PURE__ */ e(
+                mt,
+                {
+                  isShow: E,
+                  handleShowHideText: K
+                }
+              ),
+              c && /* @__PURE__ */ e(ut, { inputHelper: c })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, gt = (t, n = !1) => {
+  var o, i, r, g, u, T, p, x, c, h;
+  return n ? {} : {
+    // default
+    borderBottomStyle: (r = (i = (o = I[t]) == null ? void 0 : o.borders) == null ? void 0 : i.bottom) == null ? void 0 : r.style,
+    borderWidth: (u = (g = I[t]) == null ? void 0 : g.borders) == null ? void 0 : u.width,
+    // outline
+    borderRadius: (p = (T = I[t]) == null ? void 0 : T.borders) == null ? void 0 : p.radius,
+    borderStyle: (h = (c = (x = I[t]) == null ? void 0 : x.borders) == null ? void 0 : c.borders) == null ? void 0 : h.style
+    // filled
+    // borderRadius: undefined,
+  };
+};
+export {
+  Lt as InputText
+};

package/dist/inset-group/index.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("../component-B1mkowwk.cjs"),r=require("../generics-9F1CmKPb.cjs"),R=require("../classes-HsjFV5aN.cjs"),h=require("react"),C=require("../react-spring_web.modern-W3Nkoq_6.cjs"),y=require("../component-D-EEi7NI.cjs"),f=require("../component-Bh3EPTN0.cjs"),u=require("../generics-DE1oV0MV.cjs"),t=require("../values-C40_Fyfk.cjs"),x=({text:o,idx:i,handleSelectInset:d,isSelected:n,insetColor:l=u.ColorSets.Primarys,borderTopLeftRadius:p,borderTopRightRadius:S,borderBottomLeftRadius:c,borderBottomRightRadius:g})=>{const s=C.useSpring({backgroundColor:n?t.COLOR_VALUES[t.ColorRanges[l][0]+3]:t.COLOR_VALUES[t.ColorRanges[u.ColorSets.Greys][0]+2],color:n?t.COLOR_VALUES[t.ColorRanges[u.ColorSets.Greys][1]-1]:t.COLOR_VALUES[t.ColorRanges[u.ColorSets.Greys][1]-4],boxShadow:n?"inset 0 0px 0 hsla(0, 0%, 0%, 0), inset 0 0px 0px hsla(0, 0%, 0%, 0)":"inset 0 -2px 0 hsla(0, 0%, 100%, .055), inset 0 2px 2px hsla(0, 0%, 0%, 0.1)"}),e=C.useSpring({fontWeight:n?500:300});return a.jsx(y.Container,{style:{...s,cursor:"pointer"},paddingTop:r.Spacings.Size1,paddingBottom:r.Spacings.Size1,paddingLeft:r.Spacings.Size2,paddingRight:r.Spacings.Size2,borderTopLeftRadius:p,borderTopRightRadius:S,borderBottomLeftRadius:c,borderBottomRightRadius:g,onClick:()=>d(i),children:a.jsx(y.Container,{style:e,children:a.jsx(f.Text_Span,{style:{color:"inherit",transform:"translateY(-1px)",display:"inline-block"},children:o})})})},L=({options:o=[],valueIndex:i=0,id:d,setInput:n,setSelect:l,insetColor:p})=>{const[S,c]=h.useState(i);h.useEffect(()=>{typeof i=="number"&&c(i)},[i]);const g=s=>{c(s),n&&n(e=>({...e,[d]:o[s]})),l&&l(o[s])};return a.jsx(m.Layout,{display:R.Displays.Flex,flexAlignItem:R.FlexAlignItems.Center,children:o.map((s,e)=>a.jsx(x,{text:s.text,value:s.value,idx:e,id:s.id,handleSelectInset:g,isSelected:e===S,insetColor:p,borderTopLeftRadius:e===0?r.Radiuses.Size4:void 0,borderTopRightRadius:e===o.length-1?r.Radiuses.Size4:void 0,borderBottomLeftRadius:e===0?r.Radiuses.Size4:void 0,borderBottomRightRadius:e===o.length-1?r.Radiuses.Size4:void 0},e))})};exports.InsetGroup=L;

package/dist/inset-group/index.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+
+declare enum ColorSets {
+    Transparents = 1,
+    Greys = 2,
+    Primarys = 3,
+    Secondarys = 4,
+    Reds = 5,
+    Greens = 6,
+    Blues = 7,
+    Yellows = 8,
+    Accents1 = 9,
+    Accents2 = 10
+}
+
+export declare const InsetGroup: FC<P>;
+
+declare interface InsetGroupOption {
+    id: string | number;
+    text: string;
+    value?: any;
+}
+
+declare interface P {
+    id: any;
+    options: InsetGroupOption[];
+    valueIndex?: any;
+    setInput?: any;
+    setSelect?: (v: InsetGroupOption) => void;
+    insetColor?: ColorSets;
+}
+
+export { }

package/dist/inset-group/index.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { L as R } from "../component-DRXQXr2G.js";
+import { S as l, R as p } from "../generics-C-WSPclF.js";
+import { h as b, b as x } from "../classes-CVxy1f4M.js";
+import { useState as z, useEffect as C } from "react";
+import { u } from "../react-spring_web.modern-DgQDaJ06.js";
+import { C as y } from "../component-C1Gs4nVu.js";
+import { T as L } from "../component-BvHdlcdE.js";
+import { a as m } from "../generics-D33J7ILI.js";
+import { a as d, c as f } from "../values-CSE3dLnv.js";
+const I = ({
+  text: e,
+  // value,
+  idx: s,
+  // id,
+  handleSelectInset: c,
+  isSelected: o,
+  // rgbBg,
+  insetColor: a = m.Primarys,
+  borderTopLeftRadius: h,
+  borderTopRightRadius: S,
+  borderBottomLeftRadius: n,
+  borderBottomRightRadius: g
+}) => {
+  const r = u({
+    // backgroundColor: isSelected ? rgbBg ? rgbBg : "rgb(255,255,255)" : "rgb(222,226,230)",
+    backgroundColor: o ? d[f[a][0] + 3] : d[f[m.Greys][0] + 2],
+    // color: isSelected ? "rgb(25,25,25)" : "rgb(134,142,150)",
+    color: o ? d[f[m.Greys][1] - 1] : d[f[m.Greys][1] - 4],
+    boxShadow: o ? "inset 0 0px 0 hsla(0, 0%, 0%, 0), inset 0 0px 0px hsla(0, 0%, 0%, 0)" : "inset 0 -2px 0 hsla(0, 0%, 100%, .055), inset 0 2px 2px hsla(0, 0%, 0%, 0.1)"
+    // boxShadow: isSelected ? "inset 0 0px 0 hsla(0, 0%, 0%, 0)" : "inset 0 -2px 0 hsla(0, 0%, 100%, .15)",
+    // config: {
+    //   ...config.molasses,
+    // }
+  }), t = u({
+    // scale: isSelected ? 1 : 0.9,
+    fontWeight: o ? 500 : 300
+  });
+  return /* @__PURE__ */ i(
+    y,
+    {
+      style: { ...r, cursor: "pointer" },
+      paddingTop: l.Size1,
+      paddingBottom: l.Size1,
+      paddingLeft: l.Size2,
+      paddingRight: l.Size2,
+      borderTopLeftRadius: h,
+      borderTopRightRadius: S,
+      borderBottomLeftRadius: n,
+      borderBottomRightRadius: g,
+      onClick: () => c(s),
+      children: /* @__PURE__ */ i(y, { style: t, children: /* @__PURE__ */ i(
+        L,
+        {
+          style: {
+            color: "inherit",
+            transform: "translateY(-1px)",
+            display: "inline-block"
+          },
+          children: e
+        }
+      ) })
+    }
+  );
+}, j = ({
+  options: e = [],
+  // id, value, text
+  valueIndex: s = 0,
+  id: c,
+  setInput: o,
+  setSelect: a,
+  insetColor: h
+}) => {
+  const [S, n] = z(s);
+  C(() => {
+    typeof s == "number" && n(s);
+  }, [s]);
+  const g = (r) => {
+    n(r), o && o((t) => ({
+      ...t,
+      [c]: e[r]
+    })), a && a(e[r]);
+  };
+  return /* @__PURE__ */ i(R, { display: x.Flex, flexAlignItem: b.Center, children: e.map((r, t) => /* @__PURE__ */ i(
+    I,
+    {
+      text: r.text,
+      value: r.value,
+      idx: t,
+      id: r.id,
+      handleSelectInset: g,
+      isSelected: t === S,
+      insetColor: h,
+      borderTopLeftRadius: t === 0 ? p.Size4 : void 0,
+      borderTopRightRadius: t === e.length - 1 ? p.Size4 : void 0,
+      borderBottomLeftRadius: t === 0 ? p.Size4 : void 0,
+      borderBottomRightRadius: t === e.length - 1 ? p.Size4 : void 0
+    },
+    t
+  )) });
+};
+export {
+  j as InsetGroup
+};