@ekanos/ui 0.1.0

package/dist/form.d.ts

@@ -0,0 +1,27 @@
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { Label } from './label.js';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;
+declare function FormControl({ render, children, ...props }: useRender.ComponentProps<'div'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function FormDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element | null;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/form.js

@@ -0,0 +1,156 @@
+'use client';
+
+// ../ui/src/shadcn/form.tsx
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState
+} from "react-hook-form";
+
+// ../ui/src/lib/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../ui/src/shadcn/label.tsx
+import { jsx } from "react/jsx-runtime";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// ../ui/src/shadcn/form.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Form = FormProvider;
+var FormFieldContext = React.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx2(Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext = React.createContext(
+  {}
+);
+function FormItem({ className, ...props }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx2(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "form-item",
+      className: cn("grid gap-2", className),
+      ...props
+    }
+  ) });
+}
+function FormLabel({
+  className,
+  ...props
+}) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx2(
+    Label,
+    {
+      "data-slot": "form-label",
+      "data-error": !!error,
+      className: cn("data-[error=true]:text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+}
+function FormControl({
+  render,
+  children,
+  ...props
+}) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  const childAsRender = render ?? (React.isValidElement(children) ? children : void 0);
+  return useRender({
+    defaultTagName: "div",
+    render: childAsRender,
+    props: mergeProps(
+      {
+        "data-slot": "form-control",
+        id: formItemId,
+        "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+        "aria-invalid": !!error
+      },
+      childAsRender && !render ? props : { ...props, children }
+    )
+  });
+}
+function FormDescription({ className, ...props }) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx2(
+    "p",
+    {
+      "data-slot": "form-description",
+      id: formDescriptionId,
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function FormMessage({ className, ...props }) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: formMessageId,
+      className: cn("text-destructive text-sm", className),
+      ...props,
+      children: body
+    }
+  );
+}
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};

package/dist/icon.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { CSSProperties, ComponentType, ReactNode } from 'react';
+
+declare const FA_ICON_STYLES: readonly ["solid", "regular", "light", "duotone", "brands"];
+type FaIconStyle = (typeof FA_ICON_STYLES)[number];
+/**
+ * Styles a tenant can force across *every* icon. Brands is excluded — brand
+ * glyphs only exist in the brands family, so it's not a meaningful global
+ * family to render arbitrary icons in.
+ */
+declare const FA_OVERRIDE_STYLES: readonly ["solid", "regular", "light", "duotone"];
+type FaIconOverrideStyle = (typeof FA_OVERRIDE_STYLES)[number];
+/** True when a stored icon value is a Font Awesome class string. */
+declare function isFaIcon(name: string | null | undefined): name is string;
+/** Build the stored value for a picked Font Awesome icon. */
+declare function buildFaIconValue(style: FaIconStyle, iconName: string): string;
+
+type IconProps = {
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * The shape every icon renders through. Exported so call sites that used to
+ * hold a `LucideIcon` component value (config maps, `icon` props) have a
+ * Font Awesome-native type to declare instead.
+ */
+type IconRenderer = ComponentType<IconProps>;
+declare function IconStyleOverrideProvider({ value, children, }: {
+    value: FaIconOverrideStyle | null | undefined;
+    children: ReactNode;
+}): React.JSX.Element;
+declare function useIconStyleOverride(): "solid" | "regular" | "light" | "duotone" | null;
+/**
+ * Resolve a stored icon value to a component that accepts `{ className }`.
+ * Keeps the historical call signature so existing render sites
+ * (`const Icon = resolveIcon(name); <Icon className="h-4 w-4" />`) keep working.
+ * Legacy Lucide names are translated to Font Awesome; unknown names fall back.
+ */
+declare function resolveIcon(name: string): IconRenderer;
+/** Ergonomic single-shot renderer for new code. */
+declare function Icon({ name, className, style }: {
+    name: string;
+} & IconProps): React.JSX.Element;
+/** Render an icon by value, returning `null` for an empty name. */
+declare function renderIcon(name: string | null | undefined, className?: string): React.JSX.Element | null;
+
+export { FA_ICON_STYLES, FA_OVERRIDE_STYLES, type FaIconOverrideStyle, type FaIconStyle, Icon, type IconRenderer, IconStyleOverrideProvider, buildFaIconValue, isFaIcon, renderIcon, resolveIcon, useIconStyleOverride };