@k8o/arte-odyssey 0.0.5 → 0.1.0

package/README.md

@@ -0,0 +1,266 @@
+# @k8o/arte-odyssey
+
+A modern React UI component library built with TypeScript, Tailwind CSS, and accessibility in mind.
+
+## Installation
+
+```bash
+npm install @k8o/arte-odyssey
+# or
+pnpm add @k8o/arte-odyssey
+# or
+yarn add @k8o/arte-odyssey
+```
+
+## Peer Dependencies
+
+Make sure you have the following peer dependencies installed:
+
+```bash
+npm install react react-dom typescript tailwindcss
+```
+
+Required versions:
+- React ≥19.0.0
+- TypeScript ≥5.9.0
+- Tailwind CSS ≥4.0.0
+
+## Quick Start
+
+1. Install the package and import the CSS:
+
+```tsx
+// In your main CSS file or component
+import '@k8o/arte-odyssey/styles.css';
+```
+
+2. Use components in your React app:
+
+```tsx
+import { Button, Card } from '@k8o/arte-odyssey';
+
+function App() {
+  return (
+    <Card>
+      <h1>Welcome to ArteOdyssey</h1>
+      <Button variant="primary" onClick={() => alert('Hello!')}>
+        Click me
+      </Button>
+    </Card>
+  );
+}
+```
+
+## Component Categories
+
+### Layout & Navigation
+- **Accordion** - Collapsible content panels
+- **Breadcrumb** - Navigation path indicator
+- **Card** - Flexible content container
+- **Separator** - Visual content divider
+- **Tabs** - Tab-based content organization
+
+### Form Controls
+- **Autocomplete** - Search with suggestions
+- **Checkbox** - Multi-selection input
+- **Form Control** - Form field wrapper with label and validation
+- **Number Field** - Numeric input with controls
+- **Radio** - Single selection from options
+- **Range Field** - Slider input control
+- **Select** - Dropdown selection
+- **Text Field** - Single-line text input
+- **Textarea** - Multi-line text input
+
+### Buttons & Links
+- **Button** - Primary action button
+- **Icon Button** - Button with icon only
+- **Link Button** - Button styled as link
+- **Anchor** - External link component
+- **Icon Link** - Link with icon
+
+### Feedback & Status
+- **Alert** - Important messages and notifications
+- **Toast** - Temporary notification messages
+- **Progress** - Progress indication
+- **Baseline Status** - Web standard support indicator
+
+### Overlays & Modals
+- **Dialog** - Modal dialog boxes
+- **Drawer** - Slide-out panel
+- **Modal** - Overlay modal component
+- **Popover** - Floating content container
+- **Tooltip** - Contextual help text
+- **Dropdown Menu** - Action menu component
+
+### Data Display
+- **Code** - Formatted code display
+- **Heading** - Typography heading component
+- **List Box** - Selectable list component
+- **Text Tag** - Labeled text elements
+
+### Utilities
+- **Error Boundary** - Error handling wrapper
+- **Providers** - Context providers for the library
+- **Scroll Linked** - Scroll-triggered animations
+- **Icons** - Icon component collection
+
+## Usage Examples
+
+### Basic Button
+
+```tsx
+import { Button } from '@k8o/arte-odyssey';
+
+<Button variant="primary" size="medium">
+  Primary Button
+</Button>
+```
+
+### Form with Validation
+
+```tsx
+import { FormControl, TextField, Button } from '@k8o/arte-odyssey';
+
+<form>
+  <FormControl label="Email" required>
+    <TextField
+      type="email"
+      placeholder="Enter your email"
+      required
+    />
+  </FormControl>
+  <Button type="submit">Submit</Button>
+</form>
+```
+
+### Modal Dialog
+
+```tsx
+import { Dialog, Button } from '@k8o/arte-odyssey';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>
+        Open Dialog
+      </Button>
+      <Dialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Confirm Action"
+      >
+        <p>Are you sure you want to continue?</p>
+        <Button onClick={() => setIsOpen(false)}>
+          Confirm
+        </Button>
+      </Dialog>
+    </>
+  );
+}
+```
+
+## Granular Imports
+
+ArteOdyssey supports granular imports to optimize your bundle size:
+
+```tsx
+// Import specific components
+import { Button } from '@k8o/arte-odyssey/button';
+import { Card } from '@k8o/arte-odyssey/card';
+
+// Import specific hooks
+import { useClickAway } from '@k8o/arte-odyssey/hooks/click-away';
+import { useLocalStorage } from '@k8o/arte-odyssey/hooks/local-storage';
+```
+
+## Custom Hooks
+
+The library includes several useful hooks:
+
+- **useClickAway** - Detect clicks outside an element
+- **useClipboard** - Clipboard operations
+- **useHash** - URL hash management
+- **useInterval** - Interval timer management
+- **useLocalStorage** - Local storage with React state
+- **useScrollDirection** - Scroll direction detection
+- **useStep** - Step-based state management
+- **useTimeout** - Timeout management
+- **useWindowSize** - Window size tracking
+
+## TypeScript Support
+
+All components are fully typed with TypeScript. The library exports comprehensive type definitions for all props and APIs.
+
+```tsx
+import type { ButtonProps } from '@k8o/arte-odyssey';
+
+const CustomButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
+```
+
+## Accessibility
+
+All components follow WCAG accessibility guidelines:
+
+- Semantic HTML elements
+- Proper ARIA attributes
+- Keyboard navigation support
+- Screen reader compatibility
+- Focus management
+- Color contrast compliance
+
+## Styling & Customization
+
+Components are built with Tailwind CSS and support customization through:
+
+- CSS custom properties
+- Tailwind utility classes
+- Theme configuration
+- Style overrides
+
+## Development
+
+For local development and contributing:
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start Storybook for component development
+pnpm storybook
+
+# Run tests
+pnpm test
+
+# Build the library
+pnpm build
+
+# Type checking
+pnpm typecheck
+
+# Linting and formatting
+pnpm check:write
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT License - see [LICENSE](../../LICENSE) for details.
+
+## Contributing
+
+Contributions are welcome! Please see the [main repository](../../README.md) for contribution guidelines.
+
+---
+
+Built with ❤️ using React, TypeScript, and Tailwind CSS.

package/dist/components/anchor/anchor.d.ts

@@ -1,11 +1,11 @@
 import type { ReactNode } from 'react';
-export declare const Anchor: ({ href, children, openInNewTab, renderAnchor, }: {
-    href: string;
+export declare const Anchor: <T extends string>({ href, children, openInNewTab, renderAnchor, }: {
+    href: T;
     children: ReactNode;
     openInNewTab?: boolean;
     renderAnchor?: (props: {
         type: "internal" | "external";
-        href: string;
+        href: NoInfer<T>;
         className: string;
         target?: string;
         rel?: string;

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -7,12 +7,12 @@ export declare const Breadcrumb: {
         children?: React.ReactNode | undefined;
     }>;
     readonly Separator: FC;
-    readonly Link: FC<PropsWithChildren<{
-        href: string;
+    readonly Link: <T extends string>({ href, current, children, component, }: PropsWithChildren<{
+        href: T;
         current?: boolean;
         component?: FC<{
-            href: string;
+            href: T;
             className: string;
         }>;
-    }>>;
+    }>) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/breadcrumb/breadcrumb.js

@@ -21,7 +21,12 @@ const Item = ({ children }) => {
 const Separator = () => {
   return /* @__PURE__ */ jsx("li", { className: "text-fg-mute", children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "right", size: "sm" }) });
 };
-const _Link = ({ href, current = false, children, component }) => {
+const _Link = ({
+  href,
+  current = false,
+  children,
+  component
+}) => {
   const Link = component ?? "a";
   return current ? /* @__PURE__ */ jsx("span", { className: "text-fg-base", children }) : /* @__PURE__ */ jsx(Link, { className: "text-fg-mute underline hover:text-fg-base", href, children });
 };

package/dist/components/form/autocomplete/autocomplete.d.ts

@@ -7,7 +7,8 @@ type Props = {
     isDisabled: boolean;
     isRequired: boolean;
     options: readonly Option[];
-    value: string[];
+    value?: string[];
+    defaultValue?: string[];
     onChange: (value: string[]) => void;
 };
 export declare const Autocomplete: FC<Props>;

package/dist/components/form/autocomplete/autocomplete.js

@@ -11,12 +11,27 @@ const Autocomplete = ({
   isRequired,
   options,
   value,
+  defaultValue,
   onChange
 }) => {
+  const [internalValue, setInternalValue] = useState(
+    defaultValue || []
+  );
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
   const ref = useRef(null);
   const [open, setOpen] = useState(false);
   const [text, setText] = useState("");
   const [selectIndex, setSelectIndex] = useState();
+  const handleChange = useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange(newValue);
+    },
+    [isControlled, onChange]
+  );
   const filteredOptions = options.filter(
     (option) => option.label.includes(text)
   );
@@ -48,7 +63,7 @@ const Autocomplete = ({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex min-h-12 items-center justify-between gap-2 px-3 py-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap gap-1", children: [
-            value.map((text2) => {
+            currentValue.map((text2) => {
               const label = options.find(
                 (option) => option.value === text2
               )?.label;
@@ -66,7 +81,7 @@ const Autocomplete = ({
                         onClick: (e) => {
                           e.stopPropagation();
                           reset();
-                          onChange(value.filter((v) => v !== text2));
+                          handleChange(currentValue.filter((v) => v !== text2));
                         },
                         size: "sm",
                         children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
@@ -115,7 +130,7 @@ const Autocomplete = ({
                 onKeyDown: (e) => {
                   if (e.key === "Backspace" && text.length === 0) {
                     reset();
-                    onChange(value.slice(0, -1));
+                    handleChange(currentValue.slice(0, -1));
                     return;
                   }
                   if (e.key === "ArrowDown") {
@@ -143,12 +158,14 @@ const Autocomplete = ({
                     if (!selected) {
                       return;
                     }
-                    if (value.includes(selected.value)) {
-                      onChange(value.filter((v) => v !== selected.value));
+                    if (currentValue.includes(selected.value)) {
+                      handleChange(
+                        currentValue.filter((v) => v !== selected.value)
+                      );
                       reset();
                       return;
                     }
-                    onChange([...value, selected.value]);
+                    handleChange([...currentValue, selected.value]);
                     reset();
                     return;
                   }
@@ -160,13 +177,13 @@ const Autocomplete = ({
               }
             )
           ] }),
-          value.length > 0 && /* @__PURE__ */ jsx(
+          currentValue.length > 0 && /* @__PURE__ */ jsx(
             IconButton,
             {
               label: "\u3059\u3079\u3066\u9589\u3058\u308B",
               onClick: (e) => {
                 e.stopPropagation();
-                onChange([]);
+                handleChange([]);
               },
               size: "sm",
               children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
@@ -181,13 +198,13 @@ const Autocomplete = ({
             children: /* @__PURE__ */ jsxs("ul", { className: "max-h-96 py-2", id: `${id}_listbox`, children: [
               filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-fg-mute", children: "\u8A72\u5F53\u306A\u3057" }),
               filteredOptions.map((option, idx) => {
-                const selected = value.includes(option.value);
+                const selected = currentValue.includes(option.value);
                 return /* @__PURE__ */ jsx(
                   "li",
                   {
                     className: cn(
                       "cursor-pointer px-3 py-2",
-                      selected && "bg-primary-bg text-fg-inverse",
+                      selected && "bg-primary-bg",
                       selectIndex === idx && !selected && "bg-bg-emphasize",
                       selectIndex === idx && selected && "hover:bg-primary-bg/90"
                     ),
@@ -196,10 +213,12 @@ const Autocomplete = ({
                       e.stopPropagation();
                       reset();
                       if (selected) {
-                        onChange(value.filter((v) => v !== option.value));
+                        handleChange(
+                          currentValue.filter((v) => v !== option.value)
+                        );
                         return;
                       }
-                      onChange([...value, option.value]);
+                      handleChange([...currentValue, option.value]);
                     },
                     onKeyDown: (e) => {
                       e.preventDefault();

package/dist/components/form/checkbox/checkbox.d.ts

@@ -2,6 +2,7 @@ import { type ChangeEventHandler, type FC } from 'react';
 type Props = {
     label: string;
     value: boolean;
+    defaultChecked?: boolean;
     onChange: ChangeEventHandler<HTMLInputElement>;
 };
 export declare const Checkbox: FC<Props>;

package/dist/components/form/checkbox/checkbox.js

@@ -2,7 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "./../../../helpers/cn";
 import { CheckIcon } from "../../icons";
-const Checkbox = ({ label, value, onChange }) => {
+const Checkbox = ({
+  label,
+  value,
+  defaultChecked,
+  onChange
+}) => {
   const [isFocus, setIsFocus] = useState(false);
   return /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2", children: [
     /* @__PURE__ */ jsx(
@@ -10,6 +15,7 @@ const Checkbox = ({ label, value, onChange }) => {
       {
         checked: value,
         className: "sr-only",
+        defaultChecked,
         onBlur: () => {
           setIsFocus(false);
         },

package/dist/components/form/number-field/number-field.d.ts

@@ -6,6 +6,7 @@ type Props = {
     isDisabled: boolean;
     isRequired: boolean;
     value: number;
+    defaultValue?: number;
     onChange: (value: number) => void;
     step?: number;
     precision?: number;

package/dist/components/form/number-field/number-field.js

@@ -10,6 +10,7 @@ const NumberField = ({
   isDisabled,
   isRequired,
   value,
+  defaultValue,
   onChange,
   step = 1,
   precision = 0,
@@ -17,8 +18,12 @@ const NumberField = ({
   min = -9007199254740991,
   placeholder
 }) => {
-  const [displayValue, setDisplayValue] = useState(value.toFixed(precision));
-  const [prevValue, setPrevValue] = useState(value);
+  const [displayValue, setDisplayValue] = useState(
+    defaultValue !== void 0 ? defaultValue.toFixed(precision) : value.toFixed(precision)
+  );
+  const [prevValue, setPrevValue] = useState(
+    defaultValue !== void 0 ? defaultValue : value
+  );
   if (value !== prevValue) {
     setDisplayValue(value.toFixed(precision));
     setPrevValue(value);

package/dist/components/form/radio/radio.d.ts

@@ -4,6 +4,7 @@ type Props = {
     labelId: string;
     isDisabled: boolean;
     value: string;
+    defaultValue?: string;
     onChange: ChangeEventHandler<HTMLInputElement>;
     options: readonly Option[];
 };

package/dist/components/form/radio/radio.js

@@ -4,6 +4,7 @@ const Radio = ({
   labelId,
   isDisabled,
   value,
+  defaultValue,
   onChange,
   options
 }) => {
@@ -32,6 +33,7 @@ const Radio = ({
                   "cursor-pointer",
                   "disabled:cursor-not-allowed disabled:bg-bg-mute"
                 ),
+                defaultChecked: defaultValue === option.value,
                 disabled: isDisabled,
                 onChange,
                 type: "radio",

package/dist/components/form/range-field/range-field.d.ts

@@ -6,6 +6,7 @@ type Props = {
     isDisabled: boolean;
     isRequired: boolean;
     value: number;
+    defaultValue?: number;
     onChange: (value: number) => void;
     step?: number;
     max?: number;

package/dist/components/form/range-field/range-field.js

@@ -7,6 +7,7 @@ const RangeField = ({
   isDisabled,
   isRequired,
   value,
+  defaultValue,
   onChange,
   step = 1,
   max = 100,
@@ -30,6 +31,7 @@ const RangeField = ({
           "disabled:cursor-not-allowed disabled:opacity-50",
           isInvalid && "ring-2 ring-border-error"
         ),
+        defaultValue,
         disabled: isDisabled,
         id,
         max,

package/dist/components/form/select/select.d.ts

@@ -8,6 +8,7 @@ type Props = {
     isRequired: boolean;
     options: readonly Option[];
     value: string;
+    defaultValue?: string;
     onChange: ChangeEventHandler<HTMLSelectElement>;
 };
 export declare const Select: FC<Props>;

package/dist/components/form/select/select.js

@@ -9,6 +9,7 @@ const Select = ({
   isRequired,
   options,
   value,
+  defaultValue,
   onChange
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: "relative h-fit w-full", children: [
@@ -24,6 +25,7 @@ const Select = ({
           "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute disabled:hover:bg-bg-mute",
           "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"
         ),
+        defaultValue,
         disabled: isDisabled,
         id,
         onChange,

package/dist/components/icon-link/icon-link.d.ts

@@ -1,17 +1,15 @@
-import type { FC, PropsWithChildren, ReactNode } from 'react';
-type IconLinkProps = PropsWithChildren<{
-    size?: 'sm' | 'md' | 'lg';
-    bg?: 'transparent' | 'base';
+import type { PropsWithChildren, ReactNode } from 'react';
+export declare const IconLink: <T extends string>({ size, bg, label, href, children, openInNewTab, renderAnchor, }: PropsWithChildren<{
+    size?: "sm" | "md" | "lg";
+    bg?: "transparent" | "base";
     label?: string;
-    href: string;
+    href: T;
     openInNewTab?: boolean;
     renderAnchor?: (props: {
-        href: string;
+        href: NoInfer<T>;
         className: string;
         target?: string;
         rel?: string;
         children: ReactNode;
     }) => ReactNode;
-}>;
-export declare const IconLink: FC<IconLinkProps>;
-export {};
+}>) => ReactNode;

package/dist/components/link-button/link-button.d.ts

@@ -1,19 +1,19 @@
-import type { FC, ReactNode } from 'react';
-export declare const LinkButton: FC<{
-    variant?: 'contained' | 'outlined' | 'skeleton';
-    size?: 'sm' | 'md' | 'lg';
-    href: string;
+import type { ReactNode } from 'react';
+export declare const LinkButton: <T extends string>({ children, size, variant, href, startIcon, endIcon, active, openInNewTab, renderAnchor, }: {
+    variant?: "contained" | "outlined" | "skeleton";
+    size?: "sm" | "md" | "lg";
+    href: T;
     startIcon?: ReactNode;
     endIcon?: ReactNode;
     active?: boolean;
     openInNewTab?: boolean;
     children: string;
     renderAnchor?: (props: {
-        'aria-label'?: string;
-        href: string;
+        "aria-label"?: string;
+        href: NoInfer<T>;
         className: string;
         target?: string;
         rel?: string;
         children: ReactNode;
     }) => ReactNode;
-}>;
+}) => ReactNode;

package/dist/components/providers/component-provider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { MotionConfig } from "motion/react";
 import { ToastProvider } from "../toast";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "k8o's react ui library",
   "author": "k8o <kosakanoki@gmail.com>",
   "keywords": [
@@ -52,36 +52,36 @@
     "*.css"
   ],
   "dependencies": {
-    "@floating-ui/react": "0.27.15",
+    "@floating-ui/react": "0.27.16",
     "baseline-status": "1.0.11",
     "clsx": "2.1.1",
     "esbuild": "0.25.9",
-    "lucide-react": "0.539.0",
+    "lucide-react": "0.542.0",
     "motion": "12.23.12",
     "react-error-boundary": "6.0.0",
     "tailwind-merge": "3.3.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.1.0",
-    "@storybook/addon-a11y": "9.1.2",
-    "@storybook/addon-docs": "9.1.2",
-    "@storybook/addon-vitest": "9.1.2",
-    "@storybook/react-vite": "9.1.2",
+    "@chromatic-com/storybook": "4.1.1",
+    "@storybook/addon-a11y": "9.1.4",
+    "@storybook/addon-docs": "9.1.4",
+    "@storybook/addon-vitest": "9.1.4",
+    "@storybook/react-vite": "9.1.4",
     "@tailwindcss/postcss": "4.1.12",
     "@testing-library/dom": "10.4.1",
     "@testing-library/react": "16.3.0",
-    "@types/react": "19.1.10",
-    "@types/react-dom": "19.1.7",
-    "@vitejs/plugin-react-swc": "4.0.0",
+    "@types/react": "19.1.12",
+    "@types/react-dom": "19.1.9",
+    "@vitejs/plugin-react-swc": "4.0.1",
     "@vitest/browser": "3.2.4",
     "@vitest/ui": "3.2.4",
     "postcss": "8.5.6",
     "react": "19.1.1",
     "react-dom": "19.1.1",
-    "storybook": "9.1.2",
+    "storybook": "9.1.4",
     "storybook-addon-mock-date": "1.0.1",
     "tailwindcss": "4.1.12",
-    "vite": "7.1.2",
+    "vite": "7.1.4",
     "vitest": "3.2.4"
   },
   "peerDependencies": {