@harismawan/stamp-ui 0.1.1 → 0.2.0

package/dist/components/FileUpload.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { UploadCloud, File as FileIcon, X } from 'lucide-react';
+const Wrap = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[3]};
+  width: 100%;
+`;
+const Zone = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${(p) => p.theme.space[2]};
+  padding: ${(p) => p.theme.space[7]} ${(p) => p.theme.space[5]};
+  text-align: center;
+  font-family: ${(p) => p.theme.font.body};
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => p.$dragging ? p.theme.colors.primarySoft : p.theme.colors.surface};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => (p.$dragging ? p.theme.shadow.stamp : p.theme.shadow.none)};
+  cursor: ${(p) => (p.$disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${(p) => (p.$disabled ? 0.6 : 1)};
+  transition: box-shadow 80ms ${(p) => p.theme.easing.out},
+    background 80ms ${(p) => p.theme.easing.out};
+
+  &:focus {
+    outline: none;
+    box-shadow: ${(p) => p.theme.shadow.stamp};
+  }
+`;
+const Prompt = styled.span `
+  font-size: 0.9375rem;
+  font-weight: 700;
+`;
+const Hint = styled.span `
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.textSubtle};
+`;
+const HiddenInput = styled.input `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+const FileList = styled.ul `
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[2]};
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+const FileRow = styled.li `
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[2]};
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => p.theme.colors.surfaceMuted};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.sm};
+`;
+const FileName = styled.span `
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const FileSize = styled.span `
+  flex-shrink: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.textSubtle};
+`;
+const RemoveButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin: 0;
+  color: ${(p) => p.theme.colors.textMuted};
+  background: transparent;
+  border: none;
+  border-radius: ${(p) => p.theme.radii.xs};
+  cursor: pointer;
+  transition: color 80ms ${(p) => p.theme.easing.out},
+    background 80ms ${(p) => p.theme.easing.out};
+
+  &:hover {
+    color: ${(p) => p.theme.colors.text};
+    background: ${(p) => p.theme.colors.surfaceSunken};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 1px;
+  }
+`;
+/** Humanize a byte count into B / KB / MB. */
+export function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const kb = bytes / 1024;
+    if (kb < 1024)
+        return `${kb.toFixed(kb < 10 ? 1 : 0)} KB`;
+    const mb = kb / 1024;
+    return `${mb.toFixed(mb < 10 ? 1 : 0)} MB`;
+}
+/**
+ * Loose `accept` match: each token is either a MIME type (with optional
+ * wildcard like `image/*`) or a file extension (`.pdf`). Empty/undefined
+ * accept matches everything.
+ */
+function matchesAccept(file, accept) {
+    if (accept == null || accept.trim() === '')
+        return true;
+    const tokens = accept
+        .split(',')
+        .map((t) => t.trim().toLowerCase())
+        .filter((t) => t.length > 0);
+    if (tokens.length === 0)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return tokens.some((token) => {
+        if (token.startsWith('.')) {
+            return name.endsWith(token);
+        }
+        if (token.endsWith('/*')) {
+            const base = token.slice(0, token.indexOf('/'));
+            return type.startsWith(`${base}/`);
+        }
+        return type === token;
+    });
+}
+export const FileUpload = ({ value, defaultValue = [], onChange, accept, multiple = false, maxSize, maxFiles, disabled = false, onReject, label = 'Drag files here or click to browse', id, }) => {
+    const reactId = React.useId();
+    const inputId = id ?? reactId;
+    const inputRef = React.useRef(null);
+    const [dragging, setDragging] = React.useState(false);
+    const isControlled = value !== undefined;
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const files = isControlled ? value : uncontrolled;
+    const commit = React.useCallback((next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    const ingest = React.useCallback((incoming) => {
+        if (disabled || incoming.length === 0)
+            return;
+        const rejections = [];
+        // For single mode, a new accepted file replaces whatever is held, so the
+        // running "accepted" set starts empty; for multi we merge onto current.
+        const accepted = multiple ? [...files] : [];
+        for (const file of incoming) {
+            if (maxSize != null && file.size > maxSize) {
+                rejections.push({ file, reason: 'too-large' });
+                continue;
+            }
+            if (!matchesAccept(file, accept)) {
+                rejections.push({ file, reason: 'wrong-type' });
+                continue;
+            }
+            if (!multiple) {
+                // Replace: only the last accepted file survives.
+                accepted.length = 0;
+                accepted.push(file);
+                continue;
+            }
+            if (maxFiles != null && accepted.length >= maxFiles) {
+                rejections.push({ file, reason: 'too-many' });
+                continue;
+            }
+            accepted.push(file);
+        }
+        if (rejections.length > 0)
+            onReject?.(rejections);
+        // Single mode: if nothing passed validation, keep the current selection
+        // rather than wiping it with an empty commit.
+        if (!multiple && accepted.length === 0)
+            return;
+        const changed = accepted.length !== files.length ||
+            accepted.some((f, i) => f !== files[i]);
+        if (changed)
+            commit(accepted);
+    }, [disabled, multiple, files, maxSize, accept, maxFiles, onReject, commit]);
+    const handleInputChange = (e) => {
+        const list = e.target.files;
+        if (list != null)
+            ingest(Array.from(list));
+        // Reset so selecting the same file again re-fires change.
+        e.target.value = '';
+    };
+    const openPicker = () => {
+        if (disabled)
+            return;
+        inputRef.current?.click();
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            openPicker();
+        }
+    };
+    const handleDragOver = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        setDragging(true);
+    };
+    const handleDragEnter = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        setDragging(true);
+    };
+    const handleDragLeave = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        // dragleave fires when the cursor crosses into a child element (icon /
+        // prompt / hint). Only clear the highlight when the pointer has actually
+        // left the zone, not when it moves onto a descendant.
+        const next = e.relatedTarget;
+        if (next != null && e.currentTarget.contains(next))
+            return;
+        setDragging(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setDragging(false);
+        if (disabled)
+            return;
+        const list = e.dataTransfer?.files;
+        if (list != null)
+            ingest(Array.from(list));
+    };
+    const remove = (target) => {
+        if (disabled)
+            return;
+        commit(files.filter((f) => f !== target));
+    };
+    const hint = multiple
+        ? maxFiles != null
+            ? `Up to ${maxFiles} files`
+            : 'Multiple files allowed'
+        : 'Single file';
+    return (_jsxs(Wrap, { children: [_jsxs(Zone, { role: "button", tabIndex: disabled ? undefined : 0, "aria-disabled": disabled || undefined, "aria-controls": inputId, "$dragging": dragging, "$disabled": disabled, onClick: openPicker, onKeyDown: handleKeyDown, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx(UploadCloud, { size: 28, strokeWidth: 2.5, "aria-hidden": "true" }), _jsx(Prompt, { children: label }), _jsx(Hint, { children: hint })] }), _jsx(HiddenInput, { ref: inputRef, id: inputId, type: "file", accept: accept, multiple: multiple, disabled: disabled, tabIndex: -1, onChange: handleInputChange }), files.length > 0 ? (_jsx(FileList, { children: files.map((file, i) => (_jsxs(FileRow, { children: [_jsx(FileIcon, { size: 16, strokeWidth: 2.5, "aria-hidden": "true" }), _jsx(FileName, { children: file.name }), _jsx(FileSize, { children: formatFileSize(file.size) }), _jsx(RemoveButton, { type: "button", "aria-label": `Remove ${file.name}`, disabled: disabled, onClick: () => remove(file), children: _jsx(X, { size: 16, strokeWidth: 3, "aria-hidden": "true" }) })] }, `${file.name}-${file.size}-${i}`))) })) : null] }));
+};

package/dist/components/TagInput.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface TagInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (tags: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    max?: number;
+    validate?: (tag: string) => boolean;
+    /** @default false */
+    allowDuplicates?: boolean;
+    /** @default ['Enter', ','] */
+    delimiters?: string[];
+    id?: string;
+    /**
+     * Accessible name for the inline text input. Kept independent of
+     * `placeholder` so the textbox always has a stable name.
+     * @default 'Add tags'
+     */
+    'aria-label'?: string;
+    /**
+     * Accessible name for the wrapping `role="group"`, so the grouping
+     * semantics convey purpose to assistive technology.
+     * @default 'Tags'
+     */
+    groupLabel?: string;
+}
+export declare const TagInput: React.FC<TagInputProps>;

package/dist/components/TagInput.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { Tag } from './Tag';
+const Wrap = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: ${(p) => p.theme.space[1]};
+  width: 100%;
+  min-width: 0;
+  background: ${(p) => p.theme.colors.surface};
+  color: ${(p) => p.theme.colors.text};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  padding: 7px 10px;
+  transition: box-shadow 80ms ${(p) => p.theme.easing.out};
+  opacity: ${(p) => (p.$disabled ? 0.6 : 1)};
+  cursor: ${(p) => (p.$disabled ? 'not-allowed' : 'text')};
+
+  &:focus-within {
+    box-shadow: ${(p) => p.theme.shadow.stamp};
+  }
+`;
+const InlineInput = styled.input `
+  flex: 1;
+  min-width: 80px;
+  font-family: inherit;
+  font-size: 1rem;
+  color: ${(p) => p.theme.colors.text};
+  background: transparent;
+  border: none;
+  padding: 4px 2px;
+
+  &::placeholder {
+    color: ${(p) => p.theme.colors.textSubtle};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+export const TagInput = ({ value, defaultValue, onChange, placeholder, disabled = false, max, validate, allowDuplicates = false, delimiters = ['Enter', ','], id: idProp, 'aria-label': ariaLabel = 'Add tags', groupLabel = 'Tags', }) => {
+    const reactId = React.useId();
+    const baseId = idProp ?? reactId;
+    const isControlled = value !== undefined;
+    const [uncontrolled, setUncontrolled] = React.useState(() => value ?? defaultValue ?? []);
+    const tags = isControlled ? (value ?? []) : uncontrolled;
+    const [draft, setDraft] = React.useState('');
+    const inputRef = React.useRef(null);
+    const commit = (next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        onChange?.(next);
+    };
+    const canAdd = (tag) => {
+        if (tag === '')
+            return false;
+        if (max != null && tags.length >= max)
+            return false;
+        if (validate != null && !validate(tag))
+            return false;
+        if (!allowDuplicates && tags.includes(tag))
+            return false;
+        return true;
+    };
+    const addTag = () => {
+        const tag = draft.trim();
+        if (!canAdd(tag))
+            return;
+        commit([...tags, tag]);
+        setDraft('');
+    };
+    const removeAt = (index) => {
+        if (disabled)
+            return;
+        commit(tags.filter((_, i) => i !== index));
+    };
+    const isDelimiterKey = (e) => {
+        return delimiters.includes(e.key);
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (isDelimiterKey(e)) {
+            // Prevent the literal comma (or any printable delimiter) from being typed.
+            e.preventDefault();
+            addTag();
+            return;
+        }
+        if (e.key === 'Backspace' && draft === '' && tags.length > 0) {
+            e.preventDefault();
+            commit(tags.slice(0, -1));
+        }
+    };
+    const focusInput = () => {
+        if (!disabled)
+            inputRef.current?.focus();
+    };
+    return (_jsxs(Wrap, { role: "group", id: baseId, "aria-label": groupLabel, "$disabled": disabled, onMouseDown: (e) => {
+            // Clicking blank wrapper area focuses the input without stealing focus
+            // from an interactive child (e.g. a chip remove button).
+            if (e.target === e.currentTarget) {
+                e.preventDefault();
+                focusInput();
+            }
+        }, children: [tags.map((tag, index) => (_jsx(Tag, { onRemove: disabled ? undefined : () => removeAt(index), children: tag }, `${tag}-${index}`))), _jsx(InlineInput, { ref: inputRef, id: `${baseId}-input`, type: "text", value: draft, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, onChange: (e) => setDraft(e.target.value), onKeyDown: handleKeyDown })] }));
+};

package/dist/components/TreeView.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface TreeNode {
+    id: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    children?: TreeNode[];
+    disabled?: boolean;
+}
+export interface TreeViewProps {
+    nodes: TreeNode[];
+    expandedIds?: string[];
+    defaultExpandedIds?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    selectedId?: string | null;
+    defaultSelectedId?: string | null;
+    onSelect?: (id: string) => void;
+    id?: string;
+}
+export declare function TreeView({ nodes, expandedIds, defaultExpandedIds, onExpandedChange, selectedId, defaultSelectedId, onSelect, id: idProp, }: TreeViewProps): import("react/jsx-runtime").JSX.Element;