@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/follow-mode/follow-mode.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const PALETTE = {
   amber: { chip: "bg-amber-500 text-white", ring: "ring-amber-500" },
@@ -16,73 +13,74 @@ const DEFAULT_LABELS = {
   region: "Follow mode",
   stop: "Stop"
 };
-const FollowMode = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      color = "blue",
-      labels,
-      name,
-      onStop,
-      ...rest
-    } = props;
-    const palette = PALETTE[color];
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "relative h-full w-full rounded-2xl ring-2 ring-inset",
-          palette.ring,
-          className
+const FollowMode = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    color = "blue",
+    labels,
+    name,
+    onStop,
+    ...rest
+  } = props;
+  const palette = PALETTE[color];
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "relative h-full w-full rounded-2xl ring-2 ring-inset",
+        palette.ring,
+        className
+      ),
+      "data-follow-color": color,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm",
+            "data-follow-chip": true,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
+                    palette.chip
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "Following ",
+                      name
+                    ] })
+                  ]
+                }
+              ),
+              onStop ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": resolvedLabels.stop,
+                  className: "inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  onClick: onStop,
+                  type: "button",
+                  children: resolvedLabels.stop
+                }
+              ) : null
+            ]
+          }
         ),
-        "data-follow-color": color,
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm",
-              "data-follow-chip": true,
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    className: cn(
-                      "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
-                      palette.chip
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8" }),
-                      /* @__PURE__ */ jsxs("span", { children: [
-                        "Following ",
-                        name
-                      ] })
-                    ]
-                  }
-                ),
-                onStop ? /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    "aria-label": resolvedLabels.stop,
-                    className: "inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    onClick: onStop,
-                    type: "button",
-                    children: resolvedLabels.stop
-                  }
-                ) : null
-              ]
-            }
-          ),
-          children
-        ]
-      }
-    );
-  }
-);
+        children
+      ]
+    }
+  );
+};
 FollowMode.displayName = "FollowMode";
 export {
   FollowMode

package/dist/components/form/form.js

@@ -21,14 +21,14 @@ const FormItemContext = React.createContext(
   void 0
 );
 function useFormRootContext(componentName) {
-  const context = React.useContext(FormRootContext);
+  const context = React.use(FormRootContext);
   if (context === void 0) {
     throw new Error(`${componentName} must be used within Form.`);
   }
   return context;
 }
 function useFormItemContext(componentName) {
-  const context = React.useContext(FormItemContext);
+  const context = React.use(FormItemContext);
   if (context === void 0) {
     throw new Error(`${componentName} must be used within FormItem.`);
   }
@@ -173,12 +173,13 @@ function FormInner({
   onError,
   onSubmit,
   onValidSubmit,
+  ref,
   required = false,
   resolver,
   schema,
   values,
   ...props
-}, ref) {
+}) {
   const internalForm = useForm({
     defaultValues,
     resolver: schema === void 0 ? resolver : zodResolver(schema),
@@ -215,9 +216,8 @@ function FormInner({
     }
   );
 }
-const FormBase = React.forwardRef(FormInner);
-FormBase.displayName = "Form";
-const Form = FormBase;
+FormInner.displayName = "Form";
+const Form = FormInner;
 function FormField({ ...props }) {
   const fieldContextValue = React.useMemo(
     () => ({ name: props.name }),
@@ -226,7 +226,7 @@ function FormField({ ...props }) {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: fieldContextValue, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 }
 function useFormField() {
-  const fieldContext = React.useContext(FormFieldContext);
+  const fieldContext = React.use(FormFieldContext);
   const itemContext = useFormItemContext("useFormField");
   const { formState, getFieldState } = useFormContext();
   if (fieldContext === void 0) {
@@ -267,65 +267,69 @@ function useFormField() {
     required: itemContext.required
   };
 }
-const FormItem = React.forwardRef(
-  ({
-    children,
-    className,
-    disabled: itemDisabled,
-    invalid: itemInvalid,
-    required: itemRequired,
-    ...props
-  }, ref) => {
-    const {
-      controlId: controlIdBase,
-      descriptionId: descriptionIdBase,
-      disabled,
-      invalid,
-      messageId: messageIdBase,
-      required
-    } = useFormRootContext("FormItem");
-    const generatedId = React.useId();
-    const hasDescription = hasRenderedFormChild(children, "FormDescription");
-    const hasMessage = hasRenderedFormChild(children, "FormMessage");
-    const hasMessageSlot = hasFormChild(children, "FormMessage");
-    const effectiveDisabled = itemDisabled ?? disabled;
-    const effectiveInvalid = itemInvalid ?? invalid;
-    const effectiveRequired = itemRequired ?? required;
-    const value = React.useMemo(
-      () => ({
-        controlId: resolveItemId(controlIdBase, generatedId, "control"),
-        descriptionId: resolveItemId(
-          descriptionIdBase,
-          generatedId,
-          "description"
-        ),
-        disabled: effectiveDisabled,
-        hasDescription,
-        hasMessage,
-        hasMessageSlot,
-        id: generatedId,
-        invalid: effectiveInvalid,
-        messageId: resolveItemId(messageIdBase, generatedId, "message"),
-        required: effectiveRequired
-      }),
-      [
-        controlIdBase,
+const FormItem = ({
+  children,
+  className,
+  disabled: itemDisabled,
+  invalid: itemInvalid,
+  ref,
+  required: itemRequired,
+  ...props
+}) => {
+  const {
+    controlId: controlIdBase,
+    descriptionId: descriptionIdBase,
+    disabled,
+    invalid,
+    messageId: messageIdBase,
+    required
+  } = useFormRootContext("FormItem");
+  const generatedId = React.useId();
+  const hasDescription = hasRenderedFormChild(children, "FormDescription");
+  const hasMessage = hasRenderedFormChild(children, "FormMessage");
+  const hasMessageSlot = hasFormChild(children, "FormMessage");
+  const effectiveDisabled = itemDisabled ?? disabled;
+  const effectiveInvalid = itemInvalid ?? invalid;
+  const effectiveRequired = itemRequired ?? required;
+  const value = React.useMemo(
+    () => ({
+      controlId: resolveItemId(controlIdBase, generatedId, "control"),
+      descriptionId: resolveItemId(
         descriptionIdBase,
-        effectiveDisabled,
-        effectiveInvalid,
-        effectiveRequired,
         generatedId,
-        hasDescription,
-        hasMessage,
-        hasMessageSlot,
-        messageIdBase
-      ]
-    );
-    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ref, ...props, children }) });
-  }
-);
+        "description"
+      ),
+      disabled: effectiveDisabled,
+      hasDescription,
+      hasMessage,
+      hasMessageSlot,
+      id: generatedId,
+      invalid: effectiveInvalid,
+      messageId: resolveItemId(messageIdBase, generatedId, "message"),
+      required: effectiveRequired
+    }),
+    [
+      controlIdBase,
+      descriptionIdBase,
+      effectiveDisabled,
+      effectiveInvalid,
+      effectiveRequired,
+      generatedId,
+      hasDescription,
+      hasMessage,
+      hasMessageSlot,
+      messageIdBase
+    ]
+  );
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ref, ...props, children }) });
+};
 FormItem.displayName = "FormItem";
-const FormLabel = React.forwardRef(({ className, htmlFor, ...props }, ref) => {
+const FormLabel = ({
+  className,
+  htmlFor,
+  ref,
+  ...props
+}) => {
   const { formItemId, invalid } = useFormField();
   return /* @__PURE__ */ jsx(
     Label,
@@ -337,54 +341,63 @@ const FormLabel = React.forwardRef(({ className, htmlFor, ...props }, ref) => {
       ...props
     }
   );
-});
+};
 FormLabel.displayName = "FormLabel";
-const FormControl = React.forwardRef(
-  ({ disabled: controlDisabled, id: _id, required: controlRequired, ...props }, ref) => {
-    const {
-      disabled,
-      error,
-      formDescriptionId,
-      formItemId,
-      formMessageId,
-      hasDescription,
-      hasMessage,
-      hasMessageSlot,
-      invalid,
-      required
-    } = useFormField();
-    const { formState } = useFormContext();
-    const hasErrorMessage = hasVisibleContent(error?.message);
-    const describedBy = composeIds(
-      props["aria-describedby"],
-      hasDescription ? formDescriptionId : void 0,
-      error === void 0 ? hasMessage && invalid ? formMessageId : void 0 : hasMessageSlot && hasErrorMessage ? formMessageId : void 0
-    );
-    const effectiveDisabled = controlDisabled ?? (disabled || formState.isSubmitting);
-    const effectiveRequired = controlRequired ?? required;
-    const nativeConstraintProps = {
-      disabled: effectiveDisabled || void 0,
-      required: effectiveRequired || void 0
-    };
-    return /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ...props,
-        ...nativeConstraintProps,
-        "aria-describedby": describedBy,
-        "aria-disabled": props["aria-disabled"] ?? (effectiveDisabled || void 0),
-        "aria-invalid": props["aria-invalid"] ?? (invalid || void 0),
-        "aria-required": props["aria-required"] ?? (effectiveRequired || void 0),
-        "data-disabled": effectiveDisabled ? "true" : void 0,
-        "data-invalid": invalid ? "true" : void 0,
-        id: formItemId,
-        ref
-      }
-    );
-  }
-);
+const FormControl = ({
+  disabled: controlDisabled,
+  id: _id,
+  ref,
+  required: controlRequired,
+  ...props
+}) => {
+  const {
+    disabled,
+    error,
+    formDescriptionId,
+    formItemId,
+    formMessageId,
+    hasDescription,
+    hasMessage,
+    hasMessageSlot,
+    invalid,
+    required
+  } = useFormField();
+  const { formState } = useFormContext();
+  const hasErrorMessage = hasVisibleContent(error?.message);
+  const describedBy = composeIds(
+    props["aria-describedby"],
+    hasDescription ? formDescriptionId : void 0,
+    error === void 0 ? hasMessage && invalid ? formMessageId : void 0 : hasMessageSlot && hasErrorMessage ? formMessageId : void 0
+  );
+  const effectiveDisabled = controlDisabled ?? (disabled || formState.isSubmitting);
+  const effectiveRequired = controlRequired ?? required;
+  const nativeConstraintProps = {
+    disabled: effectiveDisabled || void 0,
+    required: effectiveRequired || void 0
+  };
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ...props,
+      ...nativeConstraintProps,
+      "aria-describedby": describedBy,
+      "aria-disabled": props["aria-disabled"] ?? (effectiveDisabled || void 0),
+      "aria-invalid": props["aria-invalid"] ?? (invalid || void 0),
+      "aria-required": props["aria-required"] ?? (effectiveRequired || void 0),
+      "data-disabled": effectiveDisabled ? "true" : void 0,
+      "data-invalid": invalid ? "true" : void 0,
+      id: formItemId,
+      ref
+    }
+  );
+};
 FormControl.displayName = "FormControl";
-const FormDescription = React.forwardRef(({ className, id: _id, ...props }, ref) => {
+const FormDescription = ({
+  className,
+  id: _id,
+  ref,
+  ...props
+}) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ jsx(
     "p",
@@ -395,9 +408,15 @@ const FormDescription = React.forwardRef(({ className, id: _id, ...props }, ref)
       ref
     }
   );
-});
+};
 FormDescription.displayName = "FormDescription";
-const FormMessage = React.forwardRef(({ children, className, id: _id, ...props }, ref) => {
+const FormMessage = ({
+  children,
+  className,
+  id: _id,
+  ref,
+  ...props
+}) => {
   const { error, formMessageId, invalid } = useFormField();
   const body = error?.message ?? children;
   if (!hasVisibleContent(body)) {
@@ -418,7 +437,7 @@ const FormMessage = React.forwardRef(({ children, className, id: _id, ...props }
       children: body
     }
   );
-});
+};
 FormMessage.displayName = "FormMessage";
 export {
   Form,

package/dist/components/gantt-chart/gantt-chart.js

@@ -1,9 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useMemo
-} from "react";
+import { useMemo } from "react";
 import { cn } from "../../lib/utils";
 const MS_PER_DAY = 24 * 60 * 60 * 1e3;
 const DEFAULT_LOCALE = "en-US";
@@ -281,53 +278,54 @@ function TimelineColumn({
     ] })
   ] });
 }
-const GanttChart = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      endDate,
-      groups,
-      labels,
-      locale = DEFAULT_LOCALE,
-      milestones = [],
-      now,
-      scale = "month",
-      startDate,
-      taskColumnWidth = 200,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const geometry = useChartGeometry({ endDate, locale, scale, startDate });
-    const nowDate = useMemo(() => now ? toDate(now) : /* @__PURE__ */ new Date(), [now]);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex w-full overflow-x-auto rounded-2xl border bg-background text-foreground",
-          className
-        ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(LeftColumn, { groups, taskColumnWidth }),
-          /* @__PURE__ */ jsx(
-            TimelineColumn,
-            {
-              geometry,
-              groups,
-              labels: resolvedLabels,
-              milestones,
-              now: nowDate
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+const GanttChart = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    endDate,
+    groups,
+    labels,
+    locale = DEFAULT_LOCALE,
+    milestones = [],
+    now,
+    scale = "month",
+    startDate,
+    taskColumnWidth = 200,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const geometry = useChartGeometry({ endDate, locale, scale, startDate });
+  const nowDate = useMemo(() => now ? toDate(now) : /* @__PURE__ */ new Date(), [now]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full overflow-x-auto rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(LeftColumn, { groups, taskColumnWidth }),
+        /* @__PURE__ */ jsx(
+          TimelineColumn,
+          {
+            geometry,
+            groups,
+            labels: resolvedLabels,
+            milestones,
+            now: nowDate
+          }
+        )
+      ]
+    }
+  );
+};
 GanttChart.displayName = "GanttChart";
 export {
   GanttChart