@akanaka-design/components 0.6.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,191 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ImgHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ComponentPropsWithoutRef, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+export * from '@akanaka-design/tokens';
+
+type AlertVariant = "info" | "success" | "warning" | "error";
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant */
+    variant?: AlertVariant;
+    /** Alert title */
+    title?: string;
+    /** Alert content */
+    children: ReactNode;
+    /** Dismiss handler */
+    onDismiss?: () => void;
+}
+declare function Alert({ variant, title, children, onDismiss, className, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = "sm" | "md" | "lg" | "xl";
+interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "size"> {
+    /** Size of the avatar */
+    size?: AvatarSize;
+    /** Fallback initials when no image */
+    initials?: string;
+    /** Image source */
+    src?: string;
+    /** Alt text */
+    alt?: string;
+}
+declare function Avatar({ size, initials, src, alt, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = "default" | "primary" | "success" | "warning" | "error" | "info";
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Visual style variant */
+    variant?: BadgeVariant;
+    /** Badge content */
+    children: ReactNode;
+}
+declare function Badge({ variant, children, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "default" | "outline" | "destructive" | "link";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Full width button */
+    fullWidth?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type CardVariant = "elevated" | "flat";
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    children: ReactNode;
+}
+interface CardSectionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function Card({ variant, children, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ children, className, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ children, className, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ children, className, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare function CardContent({ children, className, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+/** @deprecated Use CardContent instead */
+declare const CardBody: typeof CardContent;
+declare function CardFooter({ children, className, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+
+type StatCardAccent = "primary" | "secondary" | "success" | "warning" | "destructive";
+interface StatCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Metric label (muted, 13px) */
+    label: string;
+    /** Primary metric value */
+    value: ReactNode;
+    /** Top accent bar color */
+    accent?: StatCardAccent;
+}
+declare function StatCard({ label, value, accent, className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Label text */
+    label?: string;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type InputSize = "sm" | "md" | "lg";
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Size of the input */
+    size?: InputSize;
+    /** Error message to display */
+    error?: string;
+    /** Label text */
+    label?: string;
+    /** Helper text below input */
+    helperText?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+type LabelSize = "sm" | "md" | "lg";
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** Size of the label */
+    size?: LabelSize;
+    /** Show error styling (red text) */
+    error?: boolean;
+    /** Show required indicator (red asterisk) */
+    required?: boolean;
+}
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current value (0-100) */
+    value: number;
+    /** Maximum value */
+    max?: number;
+    /** Show percentage label */
+    showLabel?: boolean;
+}
+declare function Progress({ value, max, showLabel, className, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+type SelectProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
+    /** Shown when no value is selected; also used by default `SelectTrigger` + `SelectValue` */
+    placeholder?: string;
+};
+declare function Select({ placeholder, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+type SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;
+declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+type SelectValueProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Value>;
+declare const SelectValue: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+type SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;
+declare const SelectContent: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item>;
+declare const SelectItem: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type TableHeaderVariant = "default" | "primary" | "secondary" | "muted";
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+}
+interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** Header background and automatic header cell text color */
+    variant?: TableHeaderVariant;
+}
+interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+}
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+}
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+}
+declare function Table({ className, children, ...props }: TableProps): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ className, children, variant, ...props }: TableHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, children, ...props }: TableBodyProps): react_jsx_runtime.JSX.Element;
+declare function TableRow({ className, children, ...props }: TableRowProps): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, children, ...props }: TableHeadProps): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, children, ...props }: TableCellProps): react_jsx_runtime.JSX.Element;
+
+interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Default active tab value */
+    defaultValue: string;
+    /** Controlled active tab value */
+    value?: string;
+    /** Callback when tab changes */
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+}
+interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    /** Value that identifies this tab */
+    value: string;
+    children: ReactNode;
+}
+interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Value that identifies this content */
+    value: string;
+    children: ReactNode;
+}
+declare function Tabs({ defaultValue, value, onValueChange, children, className, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabsList({ children, className, ...props }: TabsListProps): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ value, children, className, ...props }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ value, children, className, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Label text */
+    label?: string;
+}
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSectionProps, CardTitle, type CardVariant, Checkbox, type CheckboxProps, Input, type InputProps, type InputSize, Label, type LabelProps, type LabelSize, Progress, type ProgressProps, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, StatCard, type StatCardAccent, type StatCardProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableHeaderVariant, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Toggle, type ToggleProps };