@dimaan/ui 0.0.3 → 0.0.4

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref } from 'react';
+import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
 import { ClassValue } from 'clsx';
 
 interface DashboardLayoutContextValue {
@@ -355,9 +355,37 @@ interface TableProps<T> {
 
 declare function Table<T>(props: TableProps<T>): react_jsx_runtime.JSX.Element;
 
+type TextareaVariant = 'default' | 'filled' | 'ghost';
+type TextareaSize = 'sm' | 'md' | 'lg';
+type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
+declare const textareaVariantClass: Record<TextareaVariant, string>;
+declare const textareaSizeClass: Record<TextareaSize, string>;
+declare const textareaResizeClass: Record<TextareaResize, string>;
+declare const textareaBaseClass = "group/textarea relative flex w-full 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-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    variant?: TextareaVariant;
+    textareaSize?: TextareaSize;
+    /** Controls the native CSS `resize` behaviour. Defaults to `'vertical'`. */
+    resize?: TextareaResize;
+    /** 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;
+    /** Stretch the wrapper to fill the parent's inline width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Class applied to the outer wrapper that frames the textarea. */
+    wrapperClassName?: string;
+    /** Class applied to the field container (`<label>` block). */
+    containerClassName?: string;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
 type Direction = 'ltr' | 'rtl';
 declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, 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 LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, 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 };
+export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, 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 LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, 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, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref } from 'react';
+import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
 import { ClassValue } from 'clsx';
 
 interface DashboardLayoutContextValue {
@@ -355,9 +355,37 @@ interface TableProps<T> {
 
 declare function Table<T>(props: TableProps<T>): react_jsx_runtime.JSX.Element;
 
+type TextareaVariant = 'default' | 'filled' | 'ghost';
+type TextareaSize = 'sm' | 'md' | 'lg';
+type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
+declare const textareaVariantClass: Record<TextareaVariant, string>;
+declare const textareaSizeClass: Record<TextareaSize, string>;
+declare const textareaResizeClass: Record<TextareaResize, string>;
+declare const textareaBaseClass = "group/textarea relative flex w-full 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-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    variant?: TextareaVariant;
+    textareaSize?: TextareaSize;
+    /** Controls the native CSS `resize` behaviour. Defaults to `'vertical'`. */
+    resize?: TextareaResize;
+    /** 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;
+    /** Stretch the wrapper to fill the parent's inline width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Class applied to the outer wrapper that frames the textarea. */
+    wrapperClassName?: string;
+    /** Class applied to the field container (`<label>` block). */
+    containerClassName?: string;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
 type Direction = 'ltr' | 'rtl';
 declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, 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 LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, 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 };
+export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, 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 LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, 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, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };

package/dist/index.js

@@ -1384,6 +1384,91 @@ 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, Input, LanguageSwitcher, 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 };
+// src/components/textarea/textareaVariants.ts
+var textareaVariantClass = {
+  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 textareaSizeClass = {
+  sm: "rounded-md px-2.5 py-1.5 text-sm",
+  md: "rounded-md px-3 py-2 text-sm",
+  lg: "rounded-md px-4 py-2.5 text-base"
+};
+var textareaResizeClass = {
+  none: "resize-none",
+  vertical: "resize-y",
+  horizontal: "resize-x",
+  both: "resize"
+};
+var textareaBaseClass = "group/textarea relative flex w-full 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-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+var Textarea = forwardRef(function Textarea2({
+  variant = "default",
+  textareaSize = "md",
+  resize = "vertical",
+  label,
+  helperText,
+  error,
+  fullWidth = true,
+  rows = 4,
+  id,
+  className,
+  wrapperClassName,
+  containerClassName,
+  "aria-invalid": ariaInvalidProp,
+  "aria-describedby": ariaDescribedByProp,
+  disabled,
+  ...props
+}, ref) {
+  const generatedId = useId();
+  const textareaId = id ?? generatedId;
+  const helperId = `${textareaId}-helper`;
+  const errorId = `${textareaId}-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: textareaId, className: "text-sm font-medium text-foreground select-none", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "textarea-wrapper",
+        className: cn(
+          textareaBaseClass,
+          textareaVariantClass[variant],
+          textareaSizeClass[textareaSize],
+          wrapperClassName
+        ),
+        "aria-invalid": ariaInvalid,
+        "data-disabled": disabled ? "true" : void 0,
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref,
+            id: textareaId,
+            rows,
+            disabled,
+            "aria-invalid": ariaInvalid,
+            "aria-describedby": ariaDescribedBy,
+            className: cn(
+              "w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+              textareaResizeClass[resize],
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    ),
+    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
+  ] });
+});
+
+export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Table, Textarea, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map