boottent-design 0.1.80 → 0.1.81

package/README.md

@@ -15,7 +15,6 @@ React, Vite, TypeScript, TailwindCSS, Radix-UI를 사용해 만든 부트텐트
   - [예제 3: 드롭다운](#예제-3-드롭다운)
   - [예제 4: 토글 버튼 그룹](#예제-4-토글-버튼-그룹)
   - [예제 5: 툴팁](#예제-5-툴팁)
-- [컴포넌트 목록](#컴포넌트-목록)
 - [제작 및 배포](#제작-및-배포)
 
 ## 소개
@@ -587,53 +586,6 @@ export const TooltipExamples = () => {
 };
 ```
 
-## 컴포넌트 목록
-
-boottent-design 라이브러리는 다음과 같은 주요 컴포넌트를 제공합니다:
-
-### UI 컴포넌트
-
-• Accordion
-• Button
-• Input
-• Icon
-• Symbols
-• Dropdown
-• ToggleButtonGroup
-• Tooltip
-• Modal
-• Alert
-• Dialog
-• Toast
-• Dropdown
-• Skeleton
-• Image
-• CalloutBox
-• Tag
-
-### 레이아웃 컴포넌트
-
-• FlexBox
-• GridBox
-• Box
-• AspectRatio
-
-### 유틸리티
-
-    •	cn (클래스 네임 병합 함수)
-
-### 테마 및 색상
-
-    •	colors (색상 팔레트)
-
-### hooks
-
-• usePortal (alert, modal, toast, dialog 등을 포함하는 포털을 생성)
-
-### provider
-
-• PortalProvider (포털 렌더링을 위한 프로바이더)
-
 ## 제작 및 배포
 
 - 김동성 (Boottent Frontend-Developer)

package/dist/UrlFormField-DhBCWqhC.js

@@ -0,0 +1,428 @@
+import { jsx as e, jsxs as v, Fragment as E } from "react/jsx-runtime";
+import { u as V, F as S, a as k, c as I, d as y, C as G, L as z, e as R, B as D, T as K, f as P, R as T, g as $, h as A, i as M, I as W, j, k as _, l as q } from "./index-fh7-GXvn.js";
+import { c as L } from "./index-CQACG110.js";
+import { useState as H } from "react";
+const Y = ({
+  name: l,
+  control: d,
+  heading: s,
+  label: n,
+  description: o,
+  required: x = !1,
+  text: m,
+  type: g,
+  errorMsg: F = !1,
+  onChange: h,
+  rules: w
+}) => {
+  const {
+    field: i,
+    fieldState: { error: t }
+  } = V({
+    name: l,
+    control: d,
+    rules: w
+  }), u = n || s || o;
+  return /* @__PURE__ */ e(
+    S,
+    {
+      control: d,
+      name: l,
+      render: () => /* @__PURE__ */ v(k, { children: [
+        u && /* @__PURE__ */ e(I, { required: x, heading: s, label: n, description: o }),
+        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ v("div", { className: "flex flex-row items-center gap-2", children: [
+          /* @__PURE__ */ e(
+            G,
+            {
+              ...i,
+              id: l,
+              checked: g === "boolean" ? i.value : i.value === m,
+              onCheckedChange: (p) => {
+                i.onChange(g === "boolean" ? p : p ? m : ""), h && h();
+              }
+            }
+          ),
+          /* @__PURE__ */ e(z, { className: "cursor-pointer", htmlFor: l, children: m })
+        ] }) }),
+        F && /* @__PURE__ */ e(R, { children: t == null ? void 0 : t.message })
+      ] })
+    }
+  );
+}, Z = ({
+  name: l,
+  control: d,
+  heading: s,
+  label: n,
+  description: o,
+  options: x,
+  required: m = !1,
+  additional: g,
+  type: F = "checkbox",
+  onChange: h,
+  rules: w
+}) => {
+  const {
+    field: i,
+    fieldState: { error: t }
+  } = V({
+    name: l,
+    control: d,
+    rules: w
+  }), u = (a, C) => {
+    var f;
+    i.onChange(C ? [...i.value || [], a] : (f = i.value) == null ? void 0 : f.filter((N) => N !== a)), h == null || h();
+  }, p = () => x.map((a) => {
+    var C;
+    return /* @__PURE__ */ v(k, { className: "flex flex-row items-center", children: [
+      /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+        G,
+        {
+          id: a.value + l,
+          checked: (C = i.value) == null ? void 0 : C.includes(a.value),
+          onCheckedChange: (f) => u(a.value, f)
+        }
+      ) }),
+      /* @__PURE__ */ e(z, { htmlFor: a.value + l, className: "cursor-pointer", children: a.text })
+    ] }, a.value);
+  }), r = () => x.map(({ value: a, text: C }) => {
+    var N;
+    const f = (N = i.value) == null ? void 0 : N.includes(a);
+    return /* @__PURE__ */ e(k, { className: "flex flex-row items-start gap-2", children: /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+      D,
+      {
+        shape: "rounded",
+        size: "xs",
+        theme: f ? "primary" : "secondary",
+        variant: f ? "solid" : "outline",
+        onClick: (c) => {
+          c.preventDefault(), u(a, !f);
+        },
+        children: C
+      }
+    ) }) }, a);
+  });
+  return /* @__PURE__ */ e(
+    S,
+    {
+      control: d,
+      name: l,
+      render: () => /* @__PURE__ */ v(k, { children: [
+        (n || s || o) && /* @__PURE__ */ e(I, { required: m, heading: s, label: n, description: o }),
+        /* @__PURE__ */ e(y, { children: F === "checkbox" ? /* @__PURE__ */ e("div", { className: "space-y-4", children: p() }) : /* @__PURE__ */ e("ul", { className: "flex w-full flex-wrap gap-2 text-regular14", children: r() }) }),
+        g,
+        /* @__PURE__ */ e(R, { children: t == null ? void 0 : t.message })
+      ] })
+    }
+  );
+}, ee = ({
+  name: l,
+  control: d,
+  label: s,
+  description: n,
+  required: o = !1,
+  children: x,
+  className: m,
+  errorMsg: g = !0
+}) => /* @__PURE__ */ e(
+  S,
+  {
+    control: d,
+    name: l,
+    render: () => /* @__PURE__ */ v(k, { children: [
+      s && /* @__PURE__ */ v(I, { required: o, children: [
+        /* @__PURE__ */ e(K, { children: s }),
+        n && /* @__PURE__ */ e(P, { children: n })
+      ] }),
+      /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e("div", { className: m, children: x }) }),
+      g && /* @__PURE__ */ e(R, {})
+    ] })
+  }
+), le = ({
+  name: l,
+  control: d,
+  heading: s,
+  label: n,
+  description: o,
+  options: x,
+  required: m = !1,
+  className: g,
+  additional: F,
+  direction: h = "vertical",
+  onChange: w,
+  rules: i
+}) => {
+  const {
+    field: t,
+    fieldState: { error: u }
+  } = V({
+    name: l,
+    control: d,
+    rules: i
+  }), p = n || s || o;
+  return /* @__PURE__ */ e(
+    S,
+    {
+      control: d,
+      name: l,
+      render: () => /* @__PURE__ */ v(k, { className: "relative", children: [
+        p && /* @__PURE__ */ e(I, { required: m, heading: s, label: n, description: o }),
+        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ v("div", { className: L("flex max-w-screen-sm items-center gap-2", g), children: [
+          /* @__PURE__ */ e(
+            T,
+            {
+              onValueChange: (r) => {
+                t.onChange(r), w && w();
+              },
+              value: t.value,
+              className: L(
+                h === "vertical" && "flex flex-col gap-4",
+                h === "horizontal" && "flex flex-wrap gap-8",
+                h === "grid" && "grid w-full grid-cols-2 gap-x-8 gap-y-4"
+              ),
+              children: x.map((r) => /* @__PURE__ */ v(k, { className: "flex flex-row items-center", children: [
+                /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e($, { value: r.value, id: r.text, checked: r.value === t.value }) }),
+                /* @__PURE__ */ e(z, { className: "cursor-pointer font-normal", htmlFor: r.text, children: r.text })
+              ] }, r.key))
+            }
+          ),
+          F && /* @__PURE__ */ e(E, { children: F })
+        ] }) }),
+        /* @__PURE__ */ e(R, { children: u == null ? void 0 : u.message })
+      ] })
+    }
+  );
+}, ae = ({
+  required: l,
+  heading: d,
+  name: s,
+  label: n,
+  description: o,
+  placeholder: x,
+  control: m,
+  tagDirection: g = "flex-col",
+  tagSize: F = "md",
+  rules: h
+}) => {
+  const { setValue: w, getValues: i } = A(), {
+    field: t,
+    fieldState: { error: u }
+  } = V({
+    name: s,
+    control: m,
+    defaultValue: [],
+    rules: h
+  }), [p, r] = H(""), a = () => {
+    if (p.trim() !== "") {
+      const c = i(s) || [];
+      w(s, [...c, p.trim()]), r("");
+    }
+  }, C = (c) => {
+    c.key === "Enter" && !c.nativeEvent.isComposing && (c.preventDefault(), a());
+  }, f = (c) => {
+    const b = i(s) || [];
+    b.splice(c, 1), w(s, b);
+  }, N = n || d || o;
+  return /* @__PURE__ */ e(
+    S,
+    {
+      control: m,
+      name: s,
+      render: () => /* @__PURE__ */ v(k, { children: [
+        N && /* @__PURE__ */ e(I, { required: l, heading: d, label: n, description: o }),
+        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ v("div", { className: "flex flex-col gap-2", children: [
+          t.value && t.value.length > 0 && /* @__PURE__ */ e("ul", { className: L("flex flex-col flex-wrap gap-1", g), children: t.value.map((c, b) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+            M,
+            {
+              size: F,
+              variant: "solid-secondary-100",
+              onClick: () => f(b),
+              icRight: /* @__PURE__ */ e(W.Cancel, { size: "10", className: "text-grey-600" }),
+              children: /* @__PURE__ */ e("span", { children: c })
+            }
+          ) }, b)) }),
+          /* @__PURE__ */ v("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(
+              j,
+              {
+                value: p,
+                onChange: (c) => r(c.target.value),
+                onKeyDown: C,
+                className: "max-w-screen-sm",
+                placeholder: x,
+                error: !!u
+              }
+            ),
+            /* @__PURE__ */ e(
+              D,
+              {
+                size: "md",
+                variant: "outline",
+                disabled: !p.trim(),
+                theme: "secondary",
+                onClick: a,
+                className: "whitespace-nowrap",
+                children: "추가"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ e(R, { children: u == null ? void 0 : u.message })
+      ] })
+    }
+  );
+}, se = ({
+  name: l,
+  control: d,
+  heading: s,
+  label: n,
+  description: o,
+  placeholder: x,
+  required: m = !1,
+  isTextArea: g = !1,
+  unitLabel: F,
+  unitLabelBefore: h,
+  inputType: w = "text",
+  className: i,
+  onChange: t,
+  onBlur: u,
+  icon: p,
+  disabled: r,
+  errorMsg: a = !0,
+  rules: C
+}) => {
+  const {
+    field: f,
+    formState: { errors: N }
+  } = V({
+    name: l,
+    control: d,
+    rules: C
+  }), c = (U) => {
+    const B = w === "number" ? Number(U.target.value) : U.target.value;
+    f.onChange(B), t == null || t(B);
+  }, b = n || s || o;
+  return /* @__PURE__ */ e(
+    S,
+    {
+      control: d,
+      name: l,
+      render: () => /* @__PURE__ */ v(k, { children: [
+        b && /* @__PURE__ */ e(I, { required: m, heading: s, label: n, description: o }),
+        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ v("div", { className: L("flex w-full max-w-screen-sm items-center gap-2", i), children: [
+          h && /* @__PURE__ */ e("div", { className: "whitespace-nowrap", children: h }),
+          g ? /* @__PURE__ */ e(
+            _,
+            {
+              ...f,
+              placeholder: x,
+              className: "h-32",
+              disabled: r,
+              error: !!N[l],
+              onChange: c
+            }
+          ) : /* @__PURE__ */ e(
+            j,
+            {
+              ...f,
+              type: w,
+              placeholder: x,
+              disabled: r,
+              error: !!N[l],
+              onChange: c,
+              onBlur: u,
+              icon: p,
+              iconPosition: "right"
+            }
+          ),
+          F && /* @__PURE__ */ e("div", { className: "whitespace-nowrap", children: F })
+        ] }) }),
+        a && /* @__PURE__ */ e(R, {})
+      ] })
+    }
+  );
+}, re = ({
+  name: l,
+  control: d,
+  heading: s,
+  label: n,
+  description: o,
+  placeholder: x = "",
+  buttonLabel: m = "보기",
+  required: g,
+  onClick: F,
+  disabled: h = !1,
+  children: w,
+  urlTitle: i,
+  rules: t
+}) => {
+  const { trigger: u, setValue: p } = A(), {
+    field: r,
+    fieldState: { error: a }
+  } = V({
+    name: l,
+    control: d,
+    rules: {
+      required: g ? "URL을 입력해주세요." : !1,
+      pattern: {
+        value: /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,4}(\/.*)?$/,
+        message: "올바른 URL을 입력해주세요."
+      },
+      ...t
+    }
+  }), C = (c) => {
+    r.onChange(c), p(l, c.target.value);
+  }, f = (c) => {
+    if (c.preventDefault(), F)
+      F(c);
+    else if (r.value && !a) {
+      const b = r.value.startsWith("http") ? r.value : `https://${r.value}`;
+      window.open(b, "_blank");
+    }
+  }, N = n || s || o;
+  return /* @__PURE__ */ e(
+    S,
+    {
+      control: d,
+      name: l,
+      render: () => /* @__PURE__ */ v(k, { children: [
+        N && /* @__PURE__ */ e(I, { required: g, heading: s, label: n, description: o }),
+        w,
+        /* @__PURE__ */ v("div", { className: "flex items-center gap-2", children: [
+          i && /* @__PURE__ */ e(q, { size: "sm", className: "flex w-32 justify-center truncate shadow-none", children: i }),
+          /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+            j,
+            {
+              ...r,
+              onBlur: () => u(l),
+              onChange: C,
+              placeholder: x,
+              className: "w-auto grow",
+              error: !!a
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            D,
+            {
+              variant: "outline",
+              theme: "secondary",
+              size: "md",
+              disabled: h || !!a || !r.value,
+              onClick: f,
+              children: m
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(R, { children: a == null ? void 0 : a.message })
+      ] })
+    }
+  );
+};
+export {
+  Y as C,
+  ee as D,
+  le as R,
+  ae as S,
+  re as U,
+  Z as a,
+  se as b
+};

package/dist/UrlFormField-VFsBGIO2.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),s=require("./index-D57xhjM5.cjs"),b=require("./index-B21JbtdU.cjs"),L=require("react"),y=({name:r,control:d,heading:a,label:c,description:x,required:j=!1,text:h,type:f,errorMsg:g=!1,onChange:m,rules:C})=>{const{field:i,fieldState:{error:n}}=s.useController({name:r,control:d,rules:C}),u=c||a||x;return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[u&&e.jsx(s.FormLabel,{required:j,heading:a,label:c,description:x}),e.jsx(s.FormControl,{children:e.jsxs("div",{className:"flex flex-row items-center gap-2",children:[e.jsx(s.Checkbox,{...i,id:r,checked:f==="boolean"?i.value:i.value===h,onCheckedChange:v=>{i.onChange(f==="boolean"?v:v?h:""),m&&m()}}),e.jsx(s.Label,{className:"cursor-pointer",htmlFor:r,children:h})]})}),g&&e.jsx(s.FormMessage,{children:n==null?void 0:n.message})]})})},S=({name:r,control:d,heading:a,label:c,description:x,options:j,required:h=!1,additional:f,type:g="checkbox",onChange:m,rules:C})=>{const{field:i,fieldState:{error:n}}=s.useController({name:r,control:d,rules:C}),u=(l,p)=>{var F;i.onChange(p?[...i.value||[],l]:(F=i.value)==null?void 0:F.filter(w=>w!==l)),m==null||m()},v=()=>j.map(l=>{var p;return e.jsxs(s.FormItem,{className:"flex flex-row items-center",children:[e.jsx(s.FormControl,{children:e.jsx(s.Checkbox,{id:l.value+r,checked:(p=i.value)==null?void 0:p.includes(l.value),onCheckedChange:F=>u(l.value,F)})}),e.jsx(s.Label,{htmlFor:l.value+r,className:"cursor-pointer",children:l.text})]},l.value)}),t=()=>j.map(({value:l,text:p})=>{var w;const F=(w=i.value)==null?void 0:w.includes(l);return e.jsx(s.FormItem,{className:"flex flex-row items-start gap-2",children:e.jsx(s.FormControl,{children:e.jsx(s.Button,{shape:"rounded",size:"xs",theme:F?"primary":"secondary",variant:F?"solid":"outline",onClick:o=>{o.preventDefault(),u(l,!F)},children:p})})},l)});return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[(c||a||x)&&e.jsx(s.FormLabel,{required:h,heading:a,label:c,description:x}),e.jsx(s.FormControl,{children:g==="checkbox"?e.jsx("div",{className:"space-y-4",children:v()}):e.jsx("ul",{className:"flex w-full flex-wrap gap-2 text-regular14",children:t()})}),f,e.jsx(s.FormMessage,{children:n==null?void 0:n.message})]})})},R=({name:r,control:d,label:a,description:c,required:x=!1,children:j,className:h,errorMsg:f=!0})=>e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[a&&e.jsxs(s.FormLabel,{required:x,children:[e.jsx(s.Text,{children:a}),c&&e.jsx(s.FormDescription,{children:c})]}),e.jsx(s.FormControl,{children:e.jsx("div",{className:h,children:j})}),f&&e.jsx(s.FormMessage,{})]})}),V=({name:r,control:d,heading:a,label:c,description:x,options:j,required:h=!1,className:f,additional:g,direction:m="vertical",onChange:C,rules:i})=>{const{field:n,fieldState:{error:u}}=s.useController({name:r,control:d,rules:i}),v=c||a||x;return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{className:"relative",children:[v&&e.jsx(s.FormLabel,{required:h,heading:a,label:c,description:x}),e.jsx(s.FormControl,{children:e.jsxs("div",{className:b.cn("flex max-w-screen-sm items-center gap-2",f),children:[e.jsx(s.RadioGroup,{onValueChange:t=>{n.onChange(t),C&&C()},value:n.value,className:b.cn(m==="vertical"&&"flex flex-col gap-4",m==="horizontal"&&"flex flex-wrap gap-8",m==="grid"&&"grid w-full grid-cols-2 gap-x-8 gap-y-4"),children:j.map(t=>e.jsxs(s.FormItem,{className:"flex flex-row items-center",children:[e.jsx(s.FormControl,{children:e.jsx(s.RadioGroupItem,{value:t.value,id:t.text,checked:t.value===n.value})}),e.jsx(s.Label,{className:"cursor-pointer font-normal",htmlFor:t.text,children:t.text})]},t.key))}),g&&e.jsx(e.Fragment,{children:g})]})}),e.jsx(s.FormMessage,{children:u==null?void 0:u.message})]})})},z=({required:r,heading:d,name:a,label:c,description:x,placeholder:j,control:h,tagDirection:f="flex-col",tagSize:g="md",rules:m})=>{const{setValue:C,getValues:i}=s.useFormContext(),{field:n,fieldState:{error:u}}=s.useController({name:a,control:h,defaultValue:[],rules:m}),[v,t]=L.useState(""),l=()=>{if(v.trim()!==""){const o=i(a)||[];C(a,[...o,v.trim()]),t("")}},p=o=>{o.key==="Enter"&&!o.nativeEvent.isComposing&&(o.preventDefault(),l())},F=o=>{const N=i(a)||[];N.splice(o,1),C(a,N)},w=c||d||x;return e.jsx(s.FormField,{control:h,name:a,render:()=>e.jsxs(s.FormItem,{children:[w&&e.jsx(s.FormLabel,{required:r,heading:d,label:c,description:x}),e.jsx(s.FormControl,{children:e.jsxs("div",{className:"flex flex-col gap-2",children:[n.value&&n.value.length>0&&e.jsx("ul",{className:b.cn("flex flex-col flex-wrap gap-1",f),children:n.value.map((o,N)=>e.jsx("li",{children:e.jsx(s.Tag,{size:g,variant:"solid-secondary-100",onClick:()=>F(N),icRight:e.jsx(s.Icon.Cancel,{size:"10",className:"text-grey-600"}),children:e.jsx("span",{children:o})})},N))}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Input,{value:v,onChange:o=>t(o.target.value),onKeyDown:p,className:"max-w-screen-sm",placeholder:j,error:!!u}),e.jsx(s.Button,{size:"md",variant:"outline",disabled:!v.trim(),theme:"secondary",onClick:l,className:"whitespace-nowrap",children:"추가"})]})]})}),e.jsx(s.FormMessage,{children:u==null?void 0:u.message})]})})},D=({name:r,control:d,heading:a,label:c,description:x,placeholder:j,required:h=!1,isTextArea:f=!1,unitLabel:g,unitLabelBefore:m,inputType:C="text",className:i,onChange:n,onBlur:u,icon:v,disabled:t,errorMsg:l=!0,rules:p})=>{const{field:F,formState:{errors:w}}=s.useController({name:r,control:d,rules:p}),o=k=>{const I=C==="number"?Number(k.target.value):k.target.value;F.onChange(I),n==null||n(I)},N=c||a||x;return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[N&&e.jsx(s.FormLabel,{required:h,heading:a,label:c,description:x}),e.jsx(s.FormControl,{children:e.jsxs("div",{className:b.cn("flex w-full max-w-screen-sm items-center gap-2",i),children:[m&&e.jsx("div",{className:"whitespace-nowrap",children:m}),f?e.jsx(s.Textarea,{...F,placeholder:j,className:"h-32",disabled:t,error:!!w[r],onChange:o}):e.jsx(s.Input,{...F,type:C,placeholder:j,disabled:t,error:!!w[r],onChange:o,onBlur:u,icon:v,iconPosition:"right"}),g&&e.jsx("div",{className:"whitespace-nowrap",children:g})]})}),l&&e.jsx(s.FormMessage,{})]})})},M=({name:r,control:d,heading:a,label:c,description:x,placeholder:j="",buttonLabel:h="보기",required:f,onClick:g,disabled:m=!1,children:C,urlTitle:i,rules:n})=>{const{trigger:u,setValue:v}=s.useFormContext(),{field:t,fieldState:{error:l}}=s.useController({name:r,control:d,rules:{required:f?"URL을 입력해주세요.":!1,pattern:{value:/^(https?:\/\/)?([\w-]+\.)+[\w-]{2,4}(\/.*)?$/,message:"올바른 URL을 입력해주세요."},...n}}),p=o=>{t.onChange(o),v(r,o.target.value)},F=o=>{if(o.preventDefault(),g)g(o);else if(t.value&&!l){const N=t.value.startsWith("http")?t.value:`https://${t.value}`;window.open(N,"_blank")}},w=c||a||x;return e.jsx(s.FormField,{control:d,name:r,render:()=>e.jsxs(s.FormItem,{children:[w&&e.jsx(s.FormLabel,{required:f,heading:a,label:c,description:x}),C,e.jsxs("div",{className:"flex items-center gap-2",children:[i&&e.jsx(s.Callout,{size:"sm",className:"flex w-32 justify-center truncate shadow-none",children:i}),e.jsx(s.FormControl,{children:e.jsx(s.Input,{...t,onBlur:()=>u(r),onChange:p,placeholder:j,className:"w-auto grow",error:!!l})}),e.jsx(s.Button,{variant:"outline",theme:"secondary",size:"md",disabled:m||!!l||!t.value,onClick:F,children:h})]}),e.jsx(s.FormMessage,{children:l==null?void 0:l.message})]})})};exports.CheckboxBooleanFormField=y;exports.CheckboxGroupFormField=S;exports.DefaultFormField=R;exports.RadioFormField=V;exports.StringArrayFormField=z;exports.StringInputField=D;exports.UrlFormField=M;

package/dist/boottent-design.ads.cjs.js

@@ -0,0 +1 @@
+"use strict";require("react/jsx-runtime");require("./index-BYinJUBt.cjs");require("react");const e=require("./boottent-design.styles.cjs.js");require("./index-D57xhjM5.cjs");require("./toggleButtonGroup-primitive-B5twgprT.cjs");require("react-dom");e.colors.main[600],e.colors.main[100],e.colors.red[400],e.colors.yellow[300],e.colors.red[400],e.colors.yellow[400],e.colors.white,e.colors.grey[800];const{grey:t,main:a,green:l,red:o,orange:r,lime:u,brown:v,blue:c,pink:x,teal:d}=e.colors;t[500],t[50],a[600],a[50],l[500],l[50],o[400],o[50],r[500],r[50],c[500],c[100],x[500],x[50],d[500],d[50],v[500],v[50],u[500],u[50];

package/dist/boottent-design.ads.es.js

@@ -0,0 +1,10 @@
+import "react/jsx-runtime";
+import "./index-goQ6Sq3Z.js";
+import "react";
+import { colors as e } from "./boottent-design.styles.es.js";
+import "./index-fh7-GXvn.js";
+import "./toggleButtonGroup-primitive-Bnq26qSE.js";
+import "react-dom";
+e.main[600], e.main[100], e.red[400], e.yellow[300], e.red[400], e.yellow[400], e.white, e.grey[800];
+const { grey: t, main: a, green: l, red: o, orange: u, lime: r, brown: v, blue: x, pink: d, teal: c } = e;
+t[500], t[50], a[600], a[50], l[500], l[50], o[400], o[50], u[500], u[50], x[500], x[100], d[500], d[50], c[500], c[50], v[500], v[50], r[500], r[50];

package/dist/boottent-design.feature.cjs.js

@@ -1 +1 @@
-"use strict";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./UrlFormField-VFsBGIO2.cjs");exports.CheckboxBooleanFormField=e.CheckboxBooleanFormField;exports.CheckboxGroupFormField=e.CheckboxGroupFormField;exports.DefaultFormField=e.DefaultFormField;exports.RadioFormField=e.RadioFormField;exports.StringArrayFormField=e.StringArrayFormField;exports.StringInputField=e.StringInputField;exports.UrlFormField=e.UrlFormField;

package/dist/boottent-design.feature.es.js

@@ -1 +1,10 @@
-
+import { C as F, a, D as e, R as i, S as l, b as d, U as m } from "./UrlFormField-DhBCWqhC.js";
+export {
+  F as CheckboxBooleanFormField,
+  a as CheckboxGroupFormField,
+  e as DefaultFormField,
+  i as RadioFormField,
+  l as StringArrayFormField,
+  d as StringInputField,
+  m as UrlFormField
+};

package/dist/boottent-design.layout.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),s=require("./index-BIxKM0nQ.cjs"),n=require("react/jsx-runtime"),g=require("./index-Bf4XH3AK.cjs");function x(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(o,r,i.get?i:{enumerable:!0,get:()=>t[r]})}}return o.default=t,Object.freeze(o)}const v=x(f);var R="AspectRatio",c=v.forwardRef((t,o)=>{const{ratio:r=1/1,style:i,...a}=t;return n.jsx("div",{style:{position:"relative",width:"100%",paddingBottom:`${100/r}%`},"data-radix-aspect-ratio-wrapper":"",children:n.jsx(s.Primitive.div,{...a,ref:o,style:{...i,position:"absolute",top:0,right:0,bottom:0,left:0}})})});c.displayName=R;var b=c;const y=b,j=({className:t,columns:o,rows:r,gap:i,style:a,...d})=>{const l=e=>e?e>=1&&e<=12?`grid-cols-${e}`:"grid-cols-auto":"",u=e=>e?e>=1&&e<=12?`grid-rows-${e} grid-flow-col`:"grid-rows-auto":"",p=i!==void 0?`${i/4}rem`:void 0;return n.jsx(s.Box,{className:g.cn("grid",l(o),u(r),t),style:{gap:p,...a},...d})};exports.Box=s.Box;exports.FlexBox=s.FlexBox;exports.AspectRatio=y;exports.GridBox=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),s=require("./index-BYinJUBt.cjs"),n=require("react/jsx-runtime"),g=require("./index-B21JbtdU.cjs");function x(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(o,r,i.get?i:{enumerable:!0,get:()=>t[r]})}}return o.default=t,Object.freeze(o)}const v=x(f);var R="AspectRatio",c=v.forwardRef((t,o)=>{const{ratio:r=1/1,style:i,...a}=t;return n.jsx("div",{style:{position:"relative",width:"100%",paddingBottom:`${100/r}%`},"data-radix-aspect-ratio-wrapper":"",children:n.jsx(s.Primitive.div,{...a,ref:o,style:{...i,position:"absolute",top:0,right:0,bottom:0,left:0}})})});c.displayName=R;var b=c;const y=b,j=({className:t,columns:o,rows:r,gap:i,style:a,...d})=>{const l=e=>e?e>=1&&e<=12?`grid-cols-${e}`:"grid-cols-auto":"",u=e=>e?e>=1&&e<=12?`grid-rows-${e} grid-flow-col`:"grid-rows-auto":"",p=i!==void 0?`${i/4}rem`:void 0;return n.jsx(s.Box,{className:g.cn("grid",l(o),u(r),t),style:{gap:p,...a},...d})};exports.Box=s.Box;exports.FlexBox=s.FlexBox;exports.AspectRatio=y;exports.GridBox=j;

package/dist/boottent-design.layout.es.js

@@ -1,8 +1,8 @@
 import * as f from "react";
-import { P as m, B as g } from "./index-7TdmKUbH.js";
-import { F as C } from "./index-7TdmKUbH.js";
+import { P as m, B as g } from "./index-goQ6Sq3Z.js";
+import { F as C } from "./index-goQ6Sq3Z.js";
 import { jsx as s } from "react/jsx-runtime";
-import { c as v } from "./index-WGpe0bEl.js";
+import { c as v } from "./index-CQACG110.js";
 var u = "AspectRatio", d = f.forwardRef(
   (o, i) => {
     const { ratio: a = 1 / 1, style: t, ...e } = o;

package/dist/boottent-design.provider.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),a=require("./toggleButtonGroup-primitive-CibJg54C.cjs"),f=require("./portal-manager-9WO01tNb.cjs"),p=require("./index-Bf4XH3AK.cjs"),i=require("react"),C=()=>{const[n,l]=i.useState([]);i.useEffect(()=>{const e=f.portalManager.subscribe((s,u)=>{l(o=>{if(u){if(!o.find(t=>t.id===s.id))return[...o,{...s,isOpen:u}]}else return o.map(t=>t.id===s.id?{...t,isOpen:u}:t);return o})});return()=>{e()}},[]);const r=i.useCallback(e=>{f.portalManager.setPortalOpen(e,!1)},[]);i.useEffect(()=>{const e=[];return n.forEach(s=>{if(!s.isOpen){const u=setTimeout(()=>{l(o=>o.filter(t=>t.id!==s.id))},300);e.push(u)}}),()=>{e.forEach(s=>clearTimeout(s))}},[n]);const d=i.useCallback(e=>{const s=e.props;p.toast({title:s.title,description:s.description,action:s.action,closeButton:s.closeButton,variant:s.variant,position:s.position,size:s.size,className:s.className}),r(e.id)},[r]);return i.useEffect(()=>{n.forEach(e=>{e.type==="toast"&&e.isOpen&&d(e)})},[n,d]),c.jsxs(a.PortalContainer,{children:[c.jsx(a.Toaster,{}),n.map(e=>{var s;if(!e.isOpen)return null;switch(e.type){case"modal":return c.jsx(a.Modal,{...e.props,onClose:()=>{e.props.onClose&&e.props.onClose(),r(e.id)},description:(s=e.props.description)==null?void 0:s.toString()},e.id);case"alert":return c.jsx(a.Alert,{...e.props,onClose:()=>{e.props.onClose&&e.props.onClose(),r(e.id)}},e.id);case"dialog":return c.jsx(a.Dialog,{...e.props,onClose:()=>{e.props.onClose&&e.props.onClose(),r(e.id)}},e.id);case"toast":return null;default:return null}})]})};exports.PortalProvider=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime");require("./index-D57xhjM5.cjs");const f=require("./portal-manager-9WO01tNb.cjs"),C=require("./index-B21JbtdU.cjs"),i=require("react"),a=require("./toggleButtonGroup-primitive-B5twgprT.cjs"),p=require("./portal-container-BwvvRejy.cjs"),m=()=>{const[r,l]=i.useState([]);i.useEffect(()=>{const e=f.portalManager.subscribe((s,u)=>{l(o=>{if(u){if(!o.find(t=>t.id===s.id))return[...o,{...s,isOpen:u}]}else return o.map(t=>t.id===s.id?{...t,isOpen:u}:t);return o})});return()=>{e()}},[]);const n=i.useCallback(e=>{f.portalManager.setPortalOpen(e,!1)},[]);i.useEffect(()=>{const e=[];return r.forEach(s=>{if(!s.isOpen){const u=setTimeout(()=>{l(o=>o.filter(t=>t.id!==s.id))},300);e.push(u)}}),()=>{e.forEach(s=>clearTimeout(s))}},[r]);const d=i.useCallback(e=>{const s=e.props;C.toast({title:s.title,description:s.description,action:s.action,closeButton:s.closeButton,variant:s.variant,position:s.position,size:s.size,className:s.className}),n(e.id)},[n]);return i.useEffect(()=>{r.forEach(e=>{e.type==="toast"&&e.isOpen&&d(e)})},[r,d]),c.jsxs(p.PortalContainer,{children:[c.jsx(p.Toaster,{}),r.map(e=>{var s;if(!e.isOpen)return null;switch(e.type){case"modal":return c.jsx(a.Modal,{...e.props,onClose:()=>{e.props.onClose&&e.props.onClose(),n(e.id)},description:(s=e.props.description)==null?void 0:s.toString()},e.id);case"alert":return c.jsx(a.Alert,{...e.props,onClose:()=>{e.props.onClose&&e.props.onClose(),n(e.id)}},e.id);case"dialog":return c.jsx(a.Dialog,{...e.props,onClose:()=>{e.props.onClose&&e.props.onClose(),n(e.id)}},e.id);case"toast":return null;default:return null}})]})};exports.PortalProvider=m;