@dimaan/ui 0.0.0 → 0.0.1

package/dist/index.d.ts

@@ -150,6 +150,34 @@ declare const HeaderSearch: react.ForwardRefExoticComponent<HeaderSearchProps &
 type HeaderTitleProps = HTMLAttributes<HTMLDivElement>;
 declare function HeaderTitle({ className, children, ...props }: HeaderTitleProps): react_jsx_runtime.JSX.Element;
 
+type InputVariant = 'default' | 'filled' | 'ghost';
+type InputSize = 'sm' | 'md' | 'lg';
+declare const inputVariantClass: Record<InputVariant, string>;
+declare const inputSizeClass: Record<InputSize, string>;
+declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    variant?: InputVariant;
+    inputSize?: InputSize;
+    /** Optional label rendered above the field. */
+    label?: ReactNode;
+    /** Helper text rendered under the field when not in an error state. */
+    helperText?: ReactNode;
+    /** Error message — renders in destructive style and sets aria-invalid. */
+    error?: ReactNode;
+    /** Element rendered before the input (icon, prefix text, etc.). */
+    leadingIcon?: ReactNode;
+    /** Element rendered after the input (icon, suffix text, etc.). */
+    trailingIcon?: ReactNode;
+    /** Stretch the wrapper to fill the parent's inline width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Class applied to the outer wrapper that holds the icons + input. */
+    wrapperClassName?: string;
+    /** Class applied to the field container (`<label>` block). */
+    containerClassName?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
 type SidebarProps = HTMLAttributes<HTMLElement>;
 declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
 
@@ -318,4 +346,4 @@ declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellNavSection, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
+export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellNavSection, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useLayoutEffect, useContext, useState, useCallback, useMemo, useEffect, useId } from 'react';
+import { createContext, forwardRef, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useLayoutEffect, useId, useContext, useState, useCallback, useMemo, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -750,6 +750,103 @@ var Checkbox = forwardRef(function Checkbox2({
     )
   ] });
 });
+
+// src/components/input/inputVariants.ts
+var inputVariantClass = {
+  default: "border border-input bg-background hover:border-ring",
+  filled: "border border-transparent bg-muted hover:bg-muted/80",
+  ghost: "border border-transparent bg-transparent hover:bg-accent"
+};
+var inputSizeClass = {
+  sm: "h-8 rounded-md px-2.5 text-sm gap-1.5",
+  md: "h-9 rounded-md px-3 text-sm gap-2",
+  lg: "h-11 rounded-md px-4 text-base gap-2.5"
+};
+var inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+var Input = forwardRef(function Input2({
+  variant = "default",
+  inputSize = "md",
+  label,
+  helperText,
+  error,
+  leadingIcon,
+  trailingIcon,
+  fullWidth = true,
+  type = "text",
+  id,
+  className,
+  wrapperClassName,
+  containerClassName,
+  "aria-invalid": ariaInvalidProp,
+  "aria-describedby": ariaDescribedByProp,
+  disabled,
+  ...props
+}, ref) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const helperId = `${inputId}-helper`;
+  const errorId = `${inputId}-error`;
+  const hasError = error !== void 0 && error !== null && error !== false;
+  const ariaInvalid = ariaInvalidProp ?? (hasError ? true : void 0);
+  const describedByIds = [
+    ariaDescribedByProp,
+    hasError ? errorId : null,
+    !hasError && helperText ? helperId : null
+  ].filter(Boolean).join(" ");
+  const ariaDescribedBy = describedByIds.length > 0 ? describedByIds : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", fullWidth && "w-full", containerClassName), children: [
+    label !== void 0 && label !== null && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-foreground select-none", children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "input-wrapper",
+        className: cn(
+          inputBaseClass,
+          inputVariantClass[variant],
+          inputSizeClass[inputSize],
+          wrapperClassName
+        ),
+        "aria-invalid": ariaInvalid,
+        "data-disabled": disabled ? "true" : void 0,
+        children: [
+          leadingIcon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
+              children: leadingIcon
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id: inputId,
+              type,
+              disabled,
+              "aria-invalid": ariaInvalid,
+              "aria-describedby": ariaDescribedBy,
+              className: cn(
+                "h-full w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+                className
+              ),
+              ...props
+            }
+          ),
+          trailingIcon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
+              children: trailingIcon
+            }
+          ) : null
+        ]
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-xs text-destructive", children: error }) : helperText ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-xs text-muted-foreground", children: helperText }) : null
+  ] });
+});
 function readDocumentDirection() {
   if (typeof document === "undefined") return "ltr";
   const dir = document.documentElement.getAttribute("dir");
@@ -1258,6 +1355,6 @@ function SortIndicator({ active, direction }) {
   return direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className });
 }
 
-export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Table, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
+export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Table, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map