@indinno/digicode-ui 0.1.0 → 0.1.1

package/registry/components/dialog.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import { useEffect, useRef, type ReactNode } from "react";
-
-export interface DialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: ReactNode;
-  description?: ReactNode;
-  children?: ReactNode;
-  footer?: ReactNode;
-  className?: string;
-}
-
-export function Dialog({ open, onOpenChange, title, description, children, footer, className }: DialogProps) {
-  const ref = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const node = ref.current;
-    if (!node) return;
-    if (open && !node.open) node.showModal();
-    if (!open && node.open) node.close();
-  }, [open]);
-
-  return (
-    <dialog
-      ref={ref}
-      className={className ? `digicode-dialog-native ${className}` : "digicode-dialog-native"}
-      onClose={() => onOpenChange(false)}
-      onCancel={(event) => {
-        event.preventDefault();
-        onOpenChange(false);
-      }}
-    >
-      <div className="digicode-dialog__header">
-        <div>
-          <h2 className="digicode-dialog__title">{title}</h2>
-          {description && <p className="digicode-dialog__description">{description}</p>}
-        </div>
-        <button type="button" className="digicode-dialog__close" aria-label="Close dialog" onClick={() => onOpenChange(false)}>×</button>
-      </div>
-      {children && <div className="digicode-dialog__body">{children}</div>}
-      {footer && <div className="digicode-dialog__footer">{footer}</div>}
-    </dialog>
-  );
-}

package/registry/components/drawer.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { useEffect, useRef, type ReactNode } from "react";
-
-export interface DrawerProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: ReactNode;
-  children?: ReactNode;
-  footer?: ReactNode;
-  className?: string;
-}
-
-export function Drawer({ open, onOpenChange, title, children, footer, className }: DrawerProps) {
-  const ref = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const node = ref.current;
-    if (!node) return;
-    if (open && !node.open) node.showModal();
-    if (!open && node.open) node.close();
-  }, [open]);
-
-  return (
-    <dialog
-      ref={ref}
-      className={className ? `digicode-drawer-native ${className}` : "digicode-drawer-native"}
-      onClose={() => onOpenChange(false)}
-      onCancel={(event) => {
-        event.preventDefault();
-        onOpenChange(false);
-      }}
-    >
-      <div className="digicode-drawer__header">
-        <h2 className="digicode-dialog__title">{title}</h2>
-        <button type="button" className="digicode-dialog__close" aria-label="Close drawer" onClick={() => onOpenChange(false)}>×</button>
-      </div>
-      {children && <div className="digicode-drawer__body">{children}</div>}
-      {footer && <div className="digicode-drawer__footer">{footer}</div>}
-    </dialog>
-  );
-}

package/registry/components/dropdown-menu.tsx

@@ -1,38 +0,0 @@
-import type { ButtonHTMLAttributes, DetailsHTMLAttributes, ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-export interface DropdownMenuProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-  trigger: ReactNode;
-  children: ReactNode;
-}
-
-export function DropdownMenu({ className, trigger, children, ...props }: DropdownMenuProps) {
-  return (
-    <details className={cn("digicode-dropdown", className)} {...props}>
-      <summary>{trigger}</summary>
-      <div className="digicode-dropdown__menu">{children}</div>
-    </details>
-  );
-}
-
-export function DropdownMenuLabel({ children }: { children: ReactNode }) {
-  return <div className="digicode-dropdown__label">{children}</div>;
-}
-
-export function DropdownMenuSeparator() {
-  return <div className="digicode-dropdown__separator" role="separator" />;
-}
-
-export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  danger?: boolean;
-  icon?: ReactNode;
-}
-
-export function DropdownMenuItem({ className, danger = false, icon, children, ...props }: DropdownMenuItemProps) {
-  return (
-    <button type="button" className={cn("digicode-dropdown__item", danger && "digicode-dropdown__item--danger", className)} {...props}>
-      {icon}
-      <span>{children}</span>
-    </button>
-  );
-}

package/registry/components/empty-state.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface EmptyStateProps {
-  icon?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  actions?: ReactNode;
-  className?: string;
-}
-
-export function EmptyState({ icon, title, description, actions, className }: EmptyStateProps) {
-  return (
-    <div className={className ? `digicode-empty ${className}` : "digicode-empty"}>
-      {icon && <div className="digicode-empty__icon">{icon}</div>}
-      <h3 className="digicode-empty__title">{title}</h3>
-      {description && <p className="digicode-empty__description">{description}</p>}
-      {actions && <div className="digicode-empty__actions">{actions}</div>}
-    </div>
-  );
-}

package/registry/components/input.tsx

@@ -1,28 +0,0 @@
-import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  hint?: string;
-  error?: string;
-  prefix?: ReactNode;
-  suffix?: ReactNode;
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { className, id, label, hint, error, prefix, suffix, ...props },
-  ref
-) {
-  const inputId = id || props.name;
-  return (
-    <label className="digicode-field" htmlFor={inputId}>
-      {label && <span className="digicode-field__label">{label}</span>}
-      <span className={cn("digicode-input-wrap", error && "digicode-input-wrap--error")}>
-        {prefix && <span className="digicode-input__affix">{prefix}</span>}
-        <input ref={ref} id={inputId} className={cn("digicode-input", className)} aria-invalid={!!error || undefined} {...props} />
-        {suffix && <span className="digicode-input__affix">{suffix}</span>}
-      </span>
-      {error ? <span className="digicode-field__error">{error}</span> : hint && <span className="digicode-field__hint">{hint}</span>}
-    </label>
-  );
-});

package/registry/components/pagination.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-export interface PaginationProps {
-  page: number;
-  totalPages: number;
-  onPageChange?: (page: number) => void;
-  className?: string;
-}
-
-export function Pagination({ page, totalPages, onPageChange, className }: PaginationProps) {
-  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
-  return (
-    <nav aria-label="Pagination" className={className ? `digicode-pagination ${className}` : "digicode-pagination"}>
-      <button type="button" className="digicode-pagination__item" disabled={page <= 1} onClick={() => onPageChange?.(page - 1)} aria-label="Previous page">‹</button>
-      {pages.map((value) => (
-        <button key={value} type="button" className="digicode-pagination__item" data-active={page === value} aria-current={page === value ? "page" : undefined} onClick={() => onPageChange?.(value)}>{value}</button>
-      ))}
-      <button type="button" className="digicode-pagination__item" disabled={page >= totalPages} onClick={() => onPageChange?.(page + 1)} aria-label="Next page">›</button>
-    </nav>
-  );
-}

package/registry/components/progress.tsx

@@ -1,17 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { cn } from "../../lib/cn";
-
-export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
-  value: number;
-  max?: number;
-  label?: string;
-}
-
-export function Progress({ className, value, max = 100, label = "Progress", ...props }: ProgressProps) {
-  const percent = Math.max(0, Math.min(100, (value / max) * 100));
-  return (
-    <div className={cn("digicode-progress", className)} role="progressbar" aria-label={label} aria-valuenow={value} aria-valuemin={0} aria-valuemax={max} {...props}>
-      <div className="digicode-progress__bar" style={{ width: `${percent}%` }} />
-    </div>
-  );
-}

package/registry/components/radio-group.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import type { InputHTMLAttributes } from "react";
-
-export interface RadioOption {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-export interface RadioGroupProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
-  name: string;
-  value?: string;
-  defaultValue?: string;
-  options: RadioOption[];
-  onValueChange?: (value: string) => void;
-}
-
-export function RadioGroup({ name, value, defaultValue, options, onValueChange, ...props }: RadioGroupProps) {
-  return (
-    <div className="digicode-radio-group" role="radiogroup">
-      {options.map((option) => (
-        <label className="digicode-checkline" key={option.value}>
-          <input
-            type="radio"
-            className="digicode-radio"
-            name={name}
-            value={option.value}
-            checked={value !== undefined ? value === option.value : undefined}
-            defaultChecked={value === undefined ? defaultValue === option.value : undefined}
-            disabled={option.disabled}
-            onChange={() => onValueChange?.(option.value)}
-            {...props}
-          />
-          <span>{option.label}</span>
-        </label>
-      ))}
-    </div>
-  );
-}

package/registry/components/select.tsx

@@ -1,33 +0,0 @@
-import { forwardRef, type SelectHTMLAttributes } from "react";
-import { cn } from "../../lib/cn";
-
-export interface SelectOption {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  label?: string;
-  hint?: string;
-  error?: string;
-  options?: SelectOption[];
-  placeholder?: string;
-}
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
-  { className, id, label, hint, error, options = [], placeholder, children, ...props },
-  ref
-) {
-  const selectId = id || props.name;
-  return (
-    <label className="digicode-field" htmlFor={selectId}>
-      {label && <span className="digicode-field__label">{label}</span>}
-      <select ref={ref} id={selectId} className={cn("digicode-select", className)} aria-invalid={!!error || undefined} {...props}>
-        {placeholder && <option value="">{placeholder}</option>}
-        {children || options.map((option) => <option key={option.value} value={option.value} disabled={option.disabled}>{option.label}</option>)}
-      </select>
-      {error ? <span className="digicode-field__error">{error}</span> : hint && <span className="digicode-field__hint">{hint}</span>}
-    </label>
-  );
-});

package/registry/components/separator.tsx

@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { cn } from "../../lib/cn";
-
-export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
-  orientation?: "horizontal" | "vertical";
-}
-
-export function Separator({ className, orientation = "horizontal", ...props }: SeparatorProps) {
-  return <hr role="separator" aria-orientation={orientation} className={cn("digicode-separator", `digicode-separator--${orientation}`, className)} {...props} />;
-}

package/registry/components/skeleton.tsx

@@ -1,6 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { cn } from "../../lib/cn";
-
-export function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div aria-hidden="true" className={cn("digicode-skeleton", className)} {...props} />;
-}

package/registry/components/spinner.tsx

@@ -1,11 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { cn } from "../../lib/cn";
-
-export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
-  size?: "sm" | "md" | "lg";
-  label?: string;
-}
-
-export function Spinner({ className, size = "md", label = "Loading", ...props }: SpinnerProps) {
-  return <span role="status" aria-label={label} className={cn("digicode-spinner", size !== "md" && `digicode-spinner--${size}`, className)} {...props} />;
-}

package/registry/components/stat-card.tsx

@@ -1,21 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-export interface StatCardProps {
-  label: ReactNode;
-  value: ReactNode;
-  icon?: ReactNode;
-  delta?: ReactNode;
-  trend?: "up" | "down" | "neutral";
-  className?: string;
-}
-
-export function StatCard({ label, value, icon, delta, trend = "neutral", className }: StatCardProps) {
-  return (
-    <div className={cn("digicode-stat", className)}>
-      <div className="digicode-stat__top"><span className="digicode-stat__label">{label}</span>{icon && <span className="digicode-stat__icon">{icon}</span>}</div>
-      <div className="digicode-stat__value">{value}</div>
-      {delta && <div className={cn("digicode-stat__delta", trend !== "neutral" && `digicode-stat__delta--${trend}`)}>{delta}</div>}
-    </div>
-  );
-}

package/registry/components/switch.tsx

@@ -1,15 +0,0 @@
-import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
-  label?: ReactNode;
-}
-
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch({ className, label, ...props }, ref) {
-  return (
-    <label className="digicode-switch-wrap">
-      <input ref={ref} type="checkbox" role="switch" className={cn("digicode-switch", className)} {...props} />
-      {label && <span>{label}</span>}
-    </label>
-  );
-});

package/registry/components/table.tsx

@@ -1,11 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import { cn } from "../../lib/cn";
-
-export function Table({ className, ...props }: ComponentPropsWithoutRef<"table">) {
-  return <div className="digicode-table-wrap"><table className={cn("digicode-table", className)} {...props} /></div>;
-}
-export function TableHeader(props: ComponentPropsWithoutRef<"thead">) { return <thead {...props} />; }
-export function TableBody(props: ComponentPropsWithoutRef<"tbody">) { return <tbody {...props} />; }
-export function TableRow(props: ComponentPropsWithoutRef<"tr">) { return <tr {...props} />; }
-export function TableHead(props: ComponentPropsWithoutRef<"th">) { return <th {...props} />; }
-export function TableCell(props: ComponentPropsWithoutRef<"td">) { return <td {...props} />; }

package/registry/components/tabs.tsx

@@ -1,52 +0,0 @@
-"use client";
-
-import { useMemo, useState, type ReactNode } from "react";
-
-export interface TabItem {
-  value: string;
-  label: ReactNode;
-  content: ReactNode;
-  disabled?: boolean;
-}
-
-export interface TabsProps {
-  items: TabItem[];
-  defaultValue?: string;
-  value?: string;
-  onValueChange?: (value: string) => void;
-  className?: string;
-}
-
-export function Tabs({ items, defaultValue, value, onValueChange, className }: TabsProps) {
-  const first = useMemo(() => items.find((item) => !item.disabled)?.value ?? "", [items]);
-  const [internal, setInternal] = useState(defaultValue ?? first);
-  const active = value ?? internal;
-  const current = items.find((item) => item.value === active) ?? items[0];
-
-  function select(next: string) {
-    if (value === undefined) setInternal(next);
-    onValueChange?.(next);
-  }
-
-  return (
-    <div className={className ? `digicode-tabs ${className}` : "digicode-tabs"}>
-      <div className="digicode-tabs__list" role="tablist">
-        {items.map((item) => (
-          <button
-            type="button"
-            role="tab"
-            key={item.value}
-            disabled={item.disabled}
-            aria-selected={active === item.value}
-            data-active={active === item.value}
-            className="digicode-tabs__trigger"
-            onClick={() => select(item.value)}
-          >
-            {item.label}
-          </button>
-        ))}
-      </div>
-      <div className="digicode-tabs__panel" role="tabpanel">{current?.content}</div>
-    </div>
-  );
-}

package/registry/components/textarea.tsx

@@ -1,22 +0,0 @@
-import { forwardRef, type TextareaHTMLAttributes } from "react";
-import { cn } from "../../lib/cn";
-
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  hint?: string;
-  error?: string;
-}
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
-  { className, id, label, hint, error, ...props },
-  ref
-) {
-  const textareaId = id || props.name;
-  return (
-    <label className="digicode-field" htmlFor={textareaId}>
-      {label && <span className="digicode-field__label">{label}</span>}
-      <textarea ref={ref} id={textareaId} className={cn("digicode-textarea", className)} aria-invalid={!!error || undefined} {...props} />
-      {error ? <span className="digicode-field__error">{error}</span> : hint && <span className="digicode-field__hint">{hint}</span>}
-    </label>
-  );
-});

package/registry/components/tooltip.tsx

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface TooltipProps {
-  content: ReactNode;
-  children: ReactNode;
-  className?: string;
-}
-
-export function Tooltip({ content, children, className }: TooltipProps) {
-  return (
-    <span className={className ? `digicode-tooltip ${className}` : "digicode-tooltip"}>
-      {children}
-      <span role="tooltip" className="digicode-tooltip__content">{content}</span>
-    </span>
-  );
-}

package/registry/lib/cn.ts

@@ -1,3 +0,0 @@
-export function cn(...values: Array<string | false | null | undefined>) {
-  return values.filter(Boolean).join(" ");
-}

package/registry/registry.json

@@ -1,32 +0,0 @@
-{
-  "name": "DigiCode",
-  "style": "digicode",
-  "components": [
-    "accordion",
-    "alert",
-    "avatar",
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "checkbox",
-    "dialog",
-    "drawer",
-    "dropdown-menu",
-    "empty-state",
-    "input",
-    "pagination",
-    "progress",
-    "radio-group",
-    "select",
-    "separator",
-    "skeleton",
-    "spinner",
-    "stat-card",
-    "switch",
-    "table",
-    "tabs",
-    "textarea",
-    "tooltip"
-  ]
-}