@nationaldesignstudio/react 0.2.0 → 0.3.0

package/dist/lib/form-control.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Shared form control styles for Input, Select, and similar components.
+ *
+ * These base styles ensure consistent appearance across all form controls:
+ * - Consistent height and padding
+ * - Unified focus ring and border treatment
+ * - Shared hover/disabled states
+ *
+ * Based on Figma BaseKit / Interface / Input & Dropdown designs.
+ */
+/**
+ * Base styles shared by all form controls (input, select, etc.)
+ */
+export declare const formControlBase: string[];
+/**
+ * Size variants shared by form controls
+ */
+export declare const formControlSizes: {
+    readonly sm: "h-36 px-12 py-8 text-14";
+    readonly default: "h-48 px-16 py-10";
+    readonly lg: "h-56 px-20 py-12 text-18";
+};
+/**
+ * Error state styles shared by form controls
+ */
+export declare const formControlError: {
+    readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+    readonly false: "";
+};
+/**
+ * Form control variants using tailwind-variants
+ * Can be composed with other variants for specific components
+ */
+export declare const formControlVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        readonly sm: "h-36 px-12 py-8 text-14";
+        readonly default: "h-48 px-16 py-10";
+        readonly lg: "h-56 px-20 py-12 text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        readonly sm: "h-36 px-12 py-8 text-14";
+        readonly default: "h-48 px-16 py-10";
+        readonly lg: "h-56 px-20 py-12 text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-36 px-12 py-8 text-14";
+        readonly default: "h-48 px-16 py-10";
+        readonly lg: "h-56 px-20 py-12 text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}>, {
+    size: {
+        readonly sm: "h-36 px-12 py-8 text-14";
+        readonly default: "h-48 px-16 py-10";
+        readonly lg: "h-56 px-20 py-12 text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        readonly sm: "h-36 px-12 py-8 text-14";
+        readonly default: "h-48 px-16 py-10";
+        readonly lg: "h-56 px-20 py-12 text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        readonly sm: "h-36 px-12 py-8 text-14";
+        readonly default: "h-48 px-16 py-10";
+        readonly lg: "h-56 px-20 py-12 text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-36 px-12 py-8 text-14";
+        readonly default: "h-48 px-16 py-10";
+        readonly lg: "h-56 px-20 py-12 text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}>, unknown, unknown, undefined>>;
+export type FormControlSize = keyof typeof formControlSizes;