sh-ui-cli 0.113.0 → 0.115.0

package/data/registry/react/components/form-rhf/rhf.test.tsx

@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import { Form } from "../form";
 import { Field } from "../form/field";
 import { FormControl, FormError } from "../form/field";
-import { adaptReactHookForm } from "./index";
+import { adaptReactHookForm, useReactHookFormAdapter } from "./index";
 
 function TestForm() {
   const rhf = useForm({ defaultValues: { email: "" }, mode: "onBlur" });
@@ -40,3 +40,55 @@ describe("adaptReactHookForm", () => {
     await screen.findByText("bad");
   });
 });
+
+// ─────────────────────────────────────────────
+// useReactHookFormAdapter — v0.114+ (안정화 hook)
+// ─────────────────────────────────────────────
+describe("useReactHookFormAdapter", () => {
+  it("returns same store instance across re-renders", () => {
+    const stores: any[] = [];
+    function Probe() {
+      const rhf = useForm({ defaultValues: { x: "" } });
+      const form = useReactHookFormAdapter(rhf);
+      stores.push(form);
+      const [, force] = React.useReducer((s: number) => s + 1, 0);
+      return <button onClick={force as any} data-testid="rerender">rerender</button>;
+    }
+    const { getByTestId } = render(<Probe />);
+    // 강제 re-render 3회
+    for (let i = 0; i < 3; i++) {
+      getByTestId("rerender").click();
+    }
+    // 최초 + re-render 들 모두 같은 인스턴스
+    expect(stores.length).toBeGreaterThanOrEqual(2);
+    for (const s of stores) {
+      expect(s).toBe(stores[0]);
+    }
+  });
+
+  it("works with render prop and propagates value through RHF", async () => {
+    const user = userEvent.setup();
+    function HookForm() {
+      const rhf = useForm({ defaultValues: { email: "" }, mode: "onBlur" });
+      const form = useReactHookFormAdapter(rhf);
+      return (
+        <Form form={form}>
+          <Field name="email">
+            {(field) => (
+              <input
+                data-testid="i"
+                value={(field.value as string) ?? ""}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+              />
+            )}
+          </Field>
+        </Form>
+      );
+    }
+    render(<HookForm />);
+    const input = screen.getByTestId("i") as HTMLInputElement;
+    await user.type(input, "kim@studio");
+    expect(input.value).toBe("kim@studio");
+  });
+});

package/data/registry/react/components/label/index.tailwind.tsx

@@ -17,7 +17,11 @@ export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
     <label
       ref={ref}
       className={cn(
-        "flex flex-col gap-0.5 text-[length:var(--text-sm)] font-medium leading-snug text-foreground cursor-pointer select-none not-has-[[data-sh-ui-label-part]]:block",
+        // 기본 — typography + 인터랙션만. display 는 label 의 native(inline) 유지.
+        // sub-part(LabelTitle/Subtitle/Description/Caption) 가 자식에 있을 때만
+        // 자동으로 flex-col stack — 사용자가 가로 정렬(inline-flex items-center)
+        // 을 명시할 수 있도록 기본 display 를 강제하지 않는다.
+        "text-[length:var(--text-sm)] font-medium leading-snug text-foreground cursor-pointer select-none has-[[data-sh-ui-label-part]]:flex has-[[data-sh-ui-label-part]]:flex-col has-[[data-sh-ui-label-part]]:gap-0.5",
         // 필수 표시 — title 이 있으면 title 뒤, 없으면 label 뒤에 * 부착
         isRequired &&
           "has-[[data-sh-ui-label-part='title']]:[&>[data-sh-ui-label-part='title']]:after:content-['_*'] has-[[data-sh-ui-label-part='title']]:[&>[data-sh-ui-label-part='title']]:after:text-danger has-[[data-sh-ui-label-part='title']]:[&>[data-sh-ui-label-part='title']]:after:font-semibold not-has-[[data-sh-ui-label-part='title']]:after:content-['_*'] not-has-[[data-sh-ui-label-part='title']]:after:text-danger not-has-[[data-sh-ui-label-part='title']]:after:font-semibold",

package/data/registry/react/components/label/styles.css

@@ -1,7 +1,6 @@
+/* 기본 — typography + 인터랙션만. display 는 label 의 native (inline) 유지.
+   사용자가 `inline-flex items-center gap-2` 같이 가로 정렬을 명시할 수 있다. */
 .sh-ui-label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: 1.4;
@@ -10,8 +9,13 @@
   user-select: none;
 }
 
-.sh-ui-label:not(:has(.sh-ui-label__title, .sh-ui-label__subtitle, .sh-ui-label__description, .sh-ui-label__caption)) {
-  display: block;
+/* sub-part (Title/Subtitle/Description/Caption) 가 자식에 있을 때만 세로 stack.
+   사용자가 `<Label><LabelTitle .../><LabelDescription .../></Label>` 형태로
+   쓸 때 자동으로 정렬. */
+.sh-ui-label:has(.sh-ui-label__title, .sh-ui-label__subtitle, .sh-ui-label__description, .sh-ui-label__caption) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
 }
 
 /* ───── 텍스트 계층 ───── */

package/data/registry/react/components/label/styles.module.css

@@ -1,7 +1,6 @@
+/* 기본 — typography + 인터랙션만. display 는 label 의 native (inline) 유지.
+   사용자가 `inline-flex items-center gap-2` 같이 가로 정렬을 명시할 수 있다. */
 .label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: 1.4;
@@ -10,8 +9,11 @@
   user-select: none;
 }
 
-.label:not(:has(.label__title, .label__subtitle, .label__description, .label__caption)) {
-  display: block;
+/* sub-part (Title/Subtitle/Description/Caption) 가 자식에 있을 때만 세로 stack. */
+.label:has(.label__title, .label__subtitle, .label__description, .label__caption) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
 }
 
 /* ───── 텍스트 계층 ───── */