@tipp/ui 1.4.10 → 1.4.12

package/dist/index.d.cts

@@ -1,7 +1,8 @@
-export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, IconButton, IconButtonProps, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs, TextArea, TextAreaProps, TextField, Tooltip, TooltipProps, useThemeContext } from '@radix-ui/themes';
+export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, IconButton, IconButtonProps, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Button as RadixButton, ButtonProps as RadixButtonProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs, TextArea, TextAreaProps, TextField, Tooltip, TooltipProps, useThemeContext } from '@radix-ui/themes';
 export { Avatar, AvatarProps } from './atoms/avatar.cjs';
 export { Badge, BadgeProps } from './atoms/badge.cjs';
 export { Button } from './atoms/button.cjs';
+export { ButtonProps } from './atoms/button.type.cjs';
 export { Card, CardProps } from './atoms/card.cjs';
 export { Checkbox, CheckboxProps } from './atoms/check-box.cjs';
 export { CheckboxGroup } from './atoms/check-box-group.cjs';
@@ -17,7 +18,7 @@ export { FieldErrorWrapper, FieldErrorWrapperProps } from './atoms/field-error-w
 export { EllipsisTooltip, EllipsisTooltipProps } from './atoms/ellipsis-tooltip.cjs';
 export { Content, Drawer, Root, Trigger } from './atoms/drawer.cjs';
 export { ToastContainer } from './atoms/toast.cjs';
-export { Form } from './atoms/form.cjs';
+export { Form } from './molecules/form.cjs';
 export { AutoSizingInput, AutoSizingInputProps } from './atoms/auto-sizing-input.cjs';
 export { ExpandTable, ExpandTableProps } from './molecules/expand-table/index.cjs';
 export { Navigation, NavigationProps } from './molecules/navigation.cjs';
@@ -35,6 +36,7 @@ export { EchartDefaultProps } from './charts/chart-default-props.cjs';
 export { CellAlign, CellDataType, getCellAlign } from './utils/get-cell-align.cjs';
 export { ColumnMeta, getColumnMeta } from './utils/get-column-meta.cjs';
 export { scrollTo } from './utils/scroll-to.cjs';
+export { Responsive } from '@radix-ui/themes/props';
 export { toast } from 'react-toastify';
 export { ExpandComp, OnRowClick } from './molecules/expand-table/row.cjs';
 export { ColumnDef, Row, createColumnHelper } from '@tanstack/react-table';

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, IconButton, IconButtonProps, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs, TextArea, TextAreaProps, TextField, Tooltip, TooltipProps, useThemeContext } from '@radix-ui/themes';
+export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, IconButton, IconButtonProps, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Button as RadixButton, ButtonProps as RadixButtonProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs, TextArea, TextAreaProps, TextField, Tooltip, TooltipProps, useThemeContext } from '@radix-ui/themes';
 export { Avatar, AvatarProps } from './atoms/avatar.js';
 export { Badge, BadgeProps } from './atoms/badge.js';
 export { Button } from './atoms/button.js';
+export { ButtonProps } from './atoms/button.type.js';
 export { Card, CardProps } from './atoms/card.js';
 export { Checkbox, CheckboxProps } from './atoms/check-box.js';
 export { CheckboxGroup } from './atoms/check-box-group.js';
@@ -17,7 +18,7 @@ export { FieldErrorWrapper, FieldErrorWrapperProps } from './atoms/field-error-w
 export { EllipsisTooltip, EllipsisTooltipProps } from './atoms/ellipsis-tooltip.js';
 export { Content, Drawer, Root, Trigger } from './atoms/drawer.js';
 export { ToastContainer } from './atoms/toast.js';
-export { Form } from './atoms/form.js';
+export { Form } from './molecules/form.js';
 export { AutoSizingInput, AutoSizingInputProps } from './atoms/auto-sizing-input.js';
 export { ExpandTable, ExpandTableProps } from './molecules/expand-table/index.js';
 export { Navigation, NavigationProps } from './molecules/navigation.js';
@@ -35,6 +36,7 @@ export { EchartDefaultProps } from './charts/chart-default-props.js';
 export { CellAlign, CellDataType, getCellAlign } from './utils/get-cell-align.js';
 export { ColumnMeta, getColumnMeta } from './utils/get-column-meta.js';
 export { scrollTo } from './utils/scroll-to.js';
+export { Responsive } from '@radix-ui/themes/props';
 export { toast } from 'react-toastify';
 export { ExpandComp, OnRowClick } from './molecules/expand-table/row.js';
 export { ColumnDef, Row, createColumnHelper } from '@tanstack/react-table';

package/dist/index.js

@@ -15,21 +15,20 @@ import {
   getCellAlign
 } from "./chunk-2BPFXK4L.js";
 import "./chunk-6ZAP2Q6K.js";
+import {
+  DatePicker
+} from "./chunk-2QDLO3YM.js";
 import {
   ExpandTable,
   createColumnHelper
-} from "./chunk-AX66E4SD.js";
+} from "./chunk-BSG2Q4XC.js";
 import "./chunk-PCWEW2UL.js";
-import {
-  DatePicker
-} from "./chunk-4AACT3BJ.js";
-import "./chunk-NDUKDKGB.js";
 import {
   DotNavigation
 } from "./chunk-EDTEVEJW.js";
 import {
   LearningPost
-} from "./chunk-YL6LJBVF.js";
+} from "./chunk-YNIACSWN.js";
 import {
   ThemeProvider
 } from "./chunk-BVNXAZ4W.js";
@@ -41,12 +40,13 @@ import {
 } from "./chunk-PF5CPG6R.js";
 import {
   TagSelector
-} from "./chunk-RIV3DRTO.js";
+} from "./chunk-KQ75QB4F.js";
 import "./chunk-BSTJBBEX.js";
-import "./chunk-76JGDATZ.js";
+import "./chunk-NDUKDKGB.js";
+import "./chunk-KTVZ4KLX.js";
 import {
-  Tabs
-} from "./chunk-5ZITU5L7.js";
+  Form
+} from "./chunk-MOAXPZLZ.js";
 import {
   TextArea
 } from "./chunk-ILRUXI2E.js";
@@ -57,9 +57,6 @@ import {
   ToastContainer,
   toast
 } from "./chunk-CYYWMYE7.js";
-import {
-  SegmentedControl
-} from "./chunk-TVDKGMBI.js";
 import {
   Select
 } from "./chunk-3JRNKBMN.js";
@@ -82,8 +79,8 @@ import {
   TabNav
 } from "./chunk-YJ7ZFOYL.js";
 import {
-  Popover
-} from "./chunk-5AVBYDPB.js";
+  Tabs
+} from "./chunk-5ZITU5L7.js";
 import {
   Progress
 } from "./chunk-365QMK4D.js";
@@ -106,8 +103,8 @@ import {
   Section
 } from "./chunk-MUNMDHRF.js";
 import {
-  Heading
-} from "./chunk-HK224ADT.js";
+  SegmentedControl
+} from "./chunk-TVDKGMBI.js";
 import {
   HoverCard
 } from "./chunk-O3T3TM3V.js";
@@ -126,6 +123,9 @@ import {
 import {
   IconButton
 } from "./chunk-O3DNDMV3.js";
+import {
+  Popover
+} from "./chunk-5AVBYDPB.js";
 import {
   Content,
   Drawer,
@@ -153,12 +153,12 @@ import {
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
-import {
-  Form
-} from "./chunk-2CVXGGI5.js";
 import {
   Grid
 } from "./chunk-EGEQY3KT.js";
+import {
+  Heading
+} from "./chunk-HK224ADT.js";
 import {
   CheckboxCards
 } from "./chunk-MIMJ7LON.js";
@@ -199,6 +199,7 @@ import {
   Button
 } from "./chunk-U7JPP7WJ.js";
 import "./chunk-LQY4RKWI.js";
+import "./chunk-ZD7MNMED.js";
 import {
   Callout
 } from "./chunk-B6XJN6EC.js";

package/dist/molecules/date-picker/index.js

@@ -1,9 +1,9 @@
 import {
   DatePicker
-} from "../../chunk-4AACT3BJ.js";
-import "../../chunk-HK224ADT.js";
+} from "../../chunk-2QDLO3YM.js";
 import "../../chunk-O3DNDMV3.js";
 import "../../chunk-25HMMI7R.js";
+import "../../chunk-HK224ADT.js";
 import "../../chunk-66C4U3BG.js";
 import "../../chunk-N552FDTV.js";
 export {

package/dist/molecules/expand-table/index.js

@@ -1,16 +1,15 @@
 import {
   ExpandTable,
   createColumnHelper
-} from "../../chunk-AX66E4SD.js";
+} from "../../chunk-BSG2Q4XC.js";
 import "../../chunk-PCWEW2UL.js";
-import "../../chunk-NDUKDKGB.js";
 import "../../chunk-BSTJBBEX.js";
-import "../../chunk-76JGDATZ.js";
-import "../../chunk-5ZITU5L7.js";
+import "../../chunk-NDUKDKGB.js";
+import "../../chunk-KTVZ4KLX.js";
+import "../../chunk-MOAXPZLZ.js";
 import "../../chunk-ILRUXI2E.js";
 import "../../chunk-JPIZP2PZ.js";
 import "../../chunk-CYYWMYE7.js";
-import "../../chunk-TVDKGMBI.js";
 import "../../chunk-3JRNKBMN.js";
 import "../../chunk-HYITAA4J.js";
 import "../../chunk-5H3YPCZK.js";
@@ -18,7 +17,7 @@ import "../../chunk-FR2GDOU2.js";
 import "../../chunk-74DX4CU7.js";
 import "../../chunk-OYM4XCHQ.js";
 import "../../chunk-YJ7ZFOYL.js";
-import "../../chunk-5AVBYDPB.js";
+import "../../chunk-5ZITU5L7.js";
 import "../../chunk-365QMK4D.js";
 import "../../chunk-YO3BQW6S.js";
 import "../../chunk-6IVCARWS.js";
@@ -26,13 +25,14 @@ import "../../chunk-6DJOIRMF.js";
 import "../../chunk-FPD73OHW.js";
 import "../../chunk-ZKZDVS7G.js";
 import "../../chunk-MUNMDHRF.js";
-import "../../chunk-HK224ADT.js";
+import "../../chunk-TVDKGMBI.js";
 import "../../chunk-O3T3TM3V.js";
 import "../../chunk-XQOL7UBI.js";
 import "../../chunk-TULWX7D6.js";
 import "../../chunk-SIM6HKVI.js";
 import "../../chunk-IM7DSIK2.js";
 import "../../chunk-O3DNDMV3.js";
+import "../../chunk-5AVBYDPB.js";
 import "../../chunk-UC627KGO.js";
 import "../../chunk-4WFMOFN2.js";
 import "../../chunk-WKFZ5MMN.js";
@@ -41,8 +41,8 @@ import "../../chunk-2DZ2Y3JI.js";
 import "../../chunk-QDZS4B6A.js";
 import "../../chunk-52MVZ6AN.js";
 import "../../chunk-25HMMI7R.js";
-import "../../chunk-2CVXGGI5.js";
 import "../../chunk-EGEQY3KT.js";
+import "../../chunk-HK224ADT.js";
 import "../../chunk-MIMJ7LON.js";
 import "../../chunk-IQEEPHOY.js";
 import "../../chunk-LHCDPZ5E.js";
@@ -57,6 +57,7 @@ import "../../chunk-YGL6SWKN.js";
 import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-U7JPP7WJ.js";
 import "../../chunk-LQY4RKWI.js";
+import "../../chunk-ZD7MNMED.js";
 import "../../chunk-B6XJN6EC.js";
 import "../../chunk-UVKNLJDZ.js";
 import "../../chunk-66C4U3BG.js";

package/dist/molecules/expand-table/row.js

@@ -1,12 +1,11 @@
 import {
   Row
 } from "../../chunk-PCWEW2UL.js";
-import "../../chunk-76JGDATZ.js";
-import "../../chunk-5ZITU5L7.js";
+import "../../chunk-KTVZ4KLX.js";
+import "../../chunk-MOAXPZLZ.js";
 import "../../chunk-ILRUXI2E.js";
 import "../../chunk-JPIZP2PZ.js";
 import "../../chunk-CYYWMYE7.js";
-import "../../chunk-TVDKGMBI.js";
 import "../../chunk-3JRNKBMN.js";
 import "../../chunk-HYITAA4J.js";
 import "../../chunk-5H3YPCZK.js";
@@ -14,7 +13,7 @@ import "../../chunk-FR2GDOU2.js";
 import "../../chunk-74DX4CU7.js";
 import "../../chunk-OYM4XCHQ.js";
 import "../../chunk-YJ7ZFOYL.js";
-import "../../chunk-5AVBYDPB.js";
+import "../../chunk-5ZITU5L7.js";
 import "../../chunk-365QMK4D.js";
 import "../../chunk-YO3BQW6S.js";
 import "../../chunk-6IVCARWS.js";
@@ -22,13 +21,14 @@ import "../../chunk-6DJOIRMF.js";
 import "../../chunk-FPD73OHW.js";
 import "../../chunk-ZKZDVS7G.js";
 import "../../chunk-MUNMDHRF.js";
-import "../../chunk-HK224ADT.js";
+import "../../chunk-TVDKGMBI.js";
 import "../../chunk-O3T3TM3V.js";
 import "../../chunk-XQOL7UBI.js";
 import "../../chunk-TULWX7D6.js";
 import "../../chunk-SIM6HKVI.js";
 import "../../chunk-IM7DSIK2.js";
 import "../../chunk-O3DNDMV3.js";
+import "../../chunk-5AVBYDPB.js";
 import "../../chunk-UC627KGO.js";
 import "../../chunk-4WFMOFN2.js";
 import "../../chunk-WKFZ5MMN.js";
@@ -37,8 +37,8 @@ import "../../chunk-2DZ2Y3JI.js";
 import "../../chunk-QDZS4B6A.js";
 import "../../chunk-52MVZ6AN.js";
 import "../../chunk-25HMMI7R.js";
-import "../../chunk-2CVXGGI5.js";
 import "../../chunk-EGEQY3KT.js";
+import "../../chunk-HK224ADT.js";
 import "../../chunk-MIMJ7LON.js";
 import "../../chunk-IQEEPHOY.js";
 import "../../chunk-LHCDPZ5E.js";
@@ -53,6 +53,7 @@ import "../../chunk-YGL6SWKN.js";
 import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-U7JPP7WJ.js";
 import "../../chunk-LQY4RKWI.js";
+import "../../chunk-ZD7MNMED.js";
 import "../../chunk-B6XJN6EC.js";
 import "../../chunk-UVKNLJDZ.js";
 import "../../chunk-66C4U3BG.js";

package/dist/molecules/form.cjs

@@ -0,0 +1,218 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/molecules/form.tsx
+var form_exports = {};
+__export(form_exports, {
+  Form: () => Form
+});
+module.exports = __toCommonJS(form_exports);
+var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
+var import_react3 = require("react");
+
+// src/atoms/heading.tsx
+var import_themes = require("@radix-ui/themes");
+var import_react = require("react");
+var import_themes2 = require("@radix-ui/themes");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Heading2(props) {
+  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const radixSize = (0, import_react.useMemo)(() => {
+    switch (variant) {
+      case "heading1":
+        return "7";
+      case "heading2":
+        return "6";
+      case "heading3":
+        return "5";
+      case "heading4":
+        return "4";
+      case "heading5":
+        return "3";
+      default:
+        return size;
+    }
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+}
+
+// src/atoms/typo.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Typo = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
+    const radixSize = (0, import_react2.useMemo)(() => {
+      if (size !== void 0)
+        return size;
+      switch (variant) {
+        case "caption":
+          return "1";
+        case "subtitle":
+          return "3";
+        case "body":
+        default:
+          return "2";
+      }
+    }, [size, variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+  }
+);
+Typo.displayName = "Typo";
+
+// src/molecules/form.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Root2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Root,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormRoot ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Root2.displayName = "FORM_ROOT";
+var FieldContext = (0, import_react3.createContext)({
+  name: ""
+});
+var Field2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Field,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormField ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldContext.Provider, { value: rest, children })
+      })
+    );
+  }
+);
+Field2.displayName = "FORM_FIELD";
+function HeadingLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
+}
+var Label2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, variant = "body" } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
+    const Comp = variant === "title" ? HeadingLabel : Typo;
+    const fieldProps = (0, import_react3.useContext)(FieldContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Label,
+      __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
+        className: `FormLabel ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Comp, { children: [
+          children,
+          fieldProps.required ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, { as: "span", color: "tomato", children: ` *` }) : null
+        ] })
+      })
+    );
+  }
+);
+Label2.displayName = "FORM_Label";
+var Message2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Message,
+      __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
+        className: `FormMessage ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, { color: "red", children })
+      })
+    );
+  }
+);
+Message2.displayName = "FORM_Message";
+var Control2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    const fieldProps = (0, import_react3.useContext)(FieldContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Control,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormControl ${className || ""}`,
+        ref,
+        required: fieldProps.required
+      })
+    );
+  }
+);
+Control2.displayName = "FORM_Control";
+var Form = {
+  Root: Root2,
+  Field: Field2,
+  Label: Label2,
+  Message: Message2,
+  ValidityState,
+  Control: RadixForm.Control,
+  Submit: RadixForm.Submit
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form
+});
+//# sourceMappingURL=form.cjs.map

package/dist/molecules/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/molecules/form.tsx","../../src/atoms/heading.tsx","../../src/atoms/typo.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport { createContext, forwardRef, useContext } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../atoms/heading';\nimport { Typo } from '../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Root\n        {...rest}\n        className={`FormRoot ${className || ''}`}\n        ref={ref}\n      >\n        {children}\n      </RadixForm.Root>\n    );\n  }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\ntype FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n  name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Field\n        {...rest}\n        className={`FormField ${className || ''}`}\n        ref={ref}\n      >\n        <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n      </RadixForm.Field>\n    );\n  }\n);\nField.displayName = 'FORM_FIELD';\n\ntype LabelProps = RadixForm.FormLabelProps & {\n  /** label의 타입을 지정  */\n  variant?: 'title' | 'body';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactElement {\n  return (\n    <Heading variant=\"heading5\" {...props}>\n      {props.children}\n    </Heading>\n  );\n}\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ children, className, variant = 'body', ...rest }, ref) => {\n    const Comp = variant === 'title' ? HeadingLabel : Typo;\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Label\n        {...rest}\n        asChild\n        className={`FormLabel ${className || ''}`}\n        ref={ref}\n      >\n        <Comp>\n          {children}\n          {fieldProps.required ? (\n            <Typo as=\"span\" color=\"tomato\">\n              {` *`}\n            </Typo>\n          ) : null}\n        </Comp>\n      </RadixForm.Label>\n    );\n  }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Message\n        {...rest}\n        asChild\n        className={`FormMessage ${className || ''}`}\n        ref={ref}\n      >\n        <Typo color=\"red\">{children}</Typo>\n      </RadixForm.Message>\n    );\n  }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n  ({ className, ...rest }, ref) => {\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Control\n        {...rest}\n        className={`FormControl ${className || ''}`}\n        ref={ref}\n        required={fieldProps.required}\n      />\n    );\n  }\n);\nControl.displayName = 'FORM_Control';\n\nexport const Form = {\n  Root,\n  Field,\n  Label,\n  Message,\n  ValidityState,\n  Control: RadixForm.Control,\n  Submit: RadixForm.Submit,\n};\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport { useMemo } from 'react';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\n\nexport type HeadingProps = RadixHeadingProps & {\n  variant?: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5';\n};\n\nexport function Heading(props: HeadingProps): React.ReactElement {\n  const { size, children, variant, ...rest } = props;\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n    switch (variant) {\n      case 'heading1':\n        return '7';\n      case 'heading2':\n        return '6';\n      case 'heading3':\n        return '5';\n      case 'heading4':\n        return '4';\n      case 'heading5':\n        return '3';\n      default:\n        return size;\n    }\n  }, [size, variant]);\n\n  return (\n    <RadixHeading {...rest} size={radixSize}>\n      {children}\n    </RadixHeading>\n  );\n}\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactElement => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n      switch (variant) {\n        case 'caption':\n          return '1';\n        case 'subtitle':\n          return '3';\n        case 'body':\n        default:\n          return '2';\n      }\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n"],"mappings":"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","names":["import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control"]}

package/dist/molecules/form.d.cts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import * as RadixForm from '@radix-ui/react-form';
+
+declare const Form: {
+    Root: react.ForwardRefExoticComponent<RadixForm.FormProps & react.RefAttributes<HTMLFormElement>>;
+    Field: react.ForwardRefExoticComponent<RadixForm.FormFieldProps & {
+        required?: boolean | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Label: react.ForwardRefExoticComponent<RadixForm.FormLabelProps & {
+        /** label의 타입을 지정  */
+        variant?: "title" | "body" | undefined;
+    } & react.RefAttributes<HTMLLabelElement>>;
+    Message: react.ForwardRefExoticComponent<RadixForm.FormMessageProps & react.RefAttributes<HTMLSpanElement>>;
+    ValidityState: {
+        new (): ValidityState;
+        prototype: ValidityState;
+    };
+    Control: react.ForwardRefExoticComponent<RadixForm.FormControlProps & react.RefAttributes<HTMLInputElement>>;
+    Submit: react.ForwardRefExoticComponent<RadixForm.FormSubmitProps & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { Form };

package/dist/molecules/form.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import * as RadixForm from '@radix-ui/react-form';
+
+declare const Form: {
+    Root: react.ForwardRefExoticComponent<RadixForm.FormProps & react.RefAttributes<HTMLFormElement>>;
+    Field: react.ForwardRefExoticComponent<RadixForm.FormFieldProps & {
+        required?: boolean | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Label: react.ForwardRefExoticComponent<RadixForm.FormLabelProps & {
+        /** label의 타입을 지정  */
+        variant?: "title" | "body" | undefined;
+    } & react.RefAttributes<HTMLLabelElement>>;
+    Message: react.ForwardRefExoticComponent<RadixForm.FormMessageProps & react.RefAttributes<HTMLSpanElement>>;
+    ValidityState: {
+        new (): ValidityState;
+        prototype: ValidityState;
+    };
+    Control: react.ForwardRefExoticComponent<RadixForm.FormControlProps & react.RefAttributes<HTMLInputElement>>;
+    Submit: react.ForwardRefExoticComponent<RadixForm.FormSubmitProps & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { Form };

package/dist/molecules/form.js

@@ -0,0 +1,10 @@
+import {
+  Form
+} from "../chunk-MOAXPZLZ.js";
+import "../chunk-52MVZ6AN.js";
+import "../chunk-HK224ADT.js";
+import "../chunk-N552FDTV.js";
+export {
+  Form
+};
+//# sourceMappingURL=form.js.map

package/dist/molecules/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/molecules/index.cjs

@@ -1076,7 +1076,7 @@ function TagSelector(props) {
   const [focus, setFocus] = (0, import_react14.useState)(false);
   const fieldRef = (0, import_react14.useRef)(null);
   const scrollRef = (0, import_react14.useRef)(null);
-  const closeRef = (0, import_react14.useRef)(0);
+  const closeRef = (0, import_react14.useRef)();
   const onFocus = (0, import_react14.useCallback)(() => {
     clearTimeout(closeRef.current);
     setFocus(true);