@devfactory-ui/ui 0.1.0

package/README.md

@@ -0,0 +1,60 @@
+# @devfactory/ui
+
+React component library for the DevFactory Design System.
+
+## Components
+
+| Component | Description |
+|---|---|
+| `Button` | Primary, neutral, danger, ghost variants with loading state |
+| `Avatar` / `AvatarGroup` | User avatars with initials or image |
+| `Badge` | Small indicator with count or dot |
+| `Tag` | Removable labels with semantic colors |
+| `Card` / `CandidateCard` | Content containers and recruitment-specific card |
+| `Input` | Text input with label, hint, error states |
+| `Tabs` | Tabbed navigation with optional count badges |
+| `Pagination` | Smart pagination with ellipsis |
+| `Dialog` | Accessible modal dialog |
+| `Accordion` | Expandable content sections |
+| `Notification` | Info/success/warning/error banners |
+| `Tooltip` | Contextual hover tooltips |
+| `Navigation` | Sidebar navigation with nested items |
+
+## Install
+
+```bash
+npm install @devfactory/ui
+```
+
+## Usage
+
+```tsx
+import { Button, Avatar, Tag } from "@devfactory/ui";
+import "@devfactory/ui/styles"; // import CSS tokens + component styles
+
+export default function App() {
+  return (
+    <div>
+      <Avatar initials="SM" size="lg" />
+      <Tag label="Disponible" scheme="positive" variant="secondary" />
+      <Button variant="primary">Voir le profil</Button>
+    </div>
+  );
+}
+```
+
+## Development
+
+```bash
+npm install          # install deps
+npm run storybook    # start Storybook on :6006
+npm run build        # build library
+```
+
+## Publish
+
+```bash
+npm publish          # publishes to Figma registry (see .npmrc)
+```
+
+> **Note**: Never commit `.npmrc` — it contains your auth token.

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./Accordion.css";
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    multiple?: boolean;
+    defaultOpen?: string[];
+    className?: string;
+}
+export declare const Accordion: React.FC<AccordionProps>;

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion } from "./Accordion";
+export type { AccordionProps, AccordionItem } from "./Accordion";

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "./Avatar.css";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "square";
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    color?: string;
+    className?: string;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+export interface AvatarGroupProps {
+    avatars: AvatarProps[];
+    max?: number;
+    size?: AvatarSize;
+}
+export declare const AvatarGroup: React.FC<AvatarGroupProps>;

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup } from "./Avatar";
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarShape } from "./Avatar";

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./Badge.css";
+export type BadgeScheme = "brand" | "neutral" | "positive" | "warning" | "danger";
+export interface BadgeProps {
+    label: string | number;
+    scheme?: BadgeScheme;
+    dot?: boolean;
+    className?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeScheme } from "./Badge";

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Button.css";
+export type ButtonVariant = "primary" | "neutral" | "danger" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    fullWidth?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button";

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import "./Card.css";
+export interface CardProps {
+    heading?: string;
+    body?: string;
+    image?: string;
+    imageAlt?: string;
+    direction?: "horizontal" | "vertical";
+    variant?: "default" | "stroke";
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Card: React.FC<CardProps>;
+export interface CandidateCardProps {
+    name: string;
+    role: string;
+    location?: string;
+    experience?: string;
+    status?: React.ReactNode;
+    skills?: string[];
+    avatar?: React.ReactNode;
+    actions?: React.ReactNode;
+    className?: string;
+}
+export declare const CandidateCard: React.FC<CandidateCardProps>;

package/dist/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card, CandidateCard } from "./Card";
+export type { CardProps, CandidateCardProps } from "./Card";

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./Dialog.css";
+export interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    size?: "sm" | "md" | "lg";
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export declare const Dialog: React.FC<DialogProps>;

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog } from "./Dialog";
+export type { DialogProps } from "./Dialog";

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Input.css";
+export type InputSize = "sm" | "md" | "lg";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    size?: InputSize;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    fullWidth?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from "./Input";
+export type { InputProps, InputSize } from "./Input";

package/dist/components/Navigation/Navigation.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "./Navigation.css";
+export interface NavItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    badge?: number;
+    href?: string;
+    children?: NavItem[];
+}
+export interface NavigationProps {
+    items: NavItem[];
+    activeId?: string;
+    onSelect?: (id: string) => void;
+    logo?: React.ReactNode;
+    collapsed?: boolean;
+    className?: string;
+}
+export declare const Navigation: React.FC<NavigationProps>;

package/dist/components/Navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { Navigation } from "./Navigation";
+export type { NavigationProps, NavItem } from "./Navigation";

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./Notification.css";
+export type NotificationScheme = "info" | "positive" | "warning" | "danger";
+export interface NotificationProps {
+    scheme?: NotificationScheme;
+    title?: string;
+    message: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare const Notification: React.FC<NotificationProps>;

package/dist/components/Notification/index.d.ts

@@ -0,0 +1,2 @@
+export { Notification } from "./Notification";
+export type { NotificationProps, NotificationScheme } from "./Notification";

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./Pagination.css";
+export interface PaginationProps {
+    totalItems: number;
+    pageSize?: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    className?: string;
+}
+export declare const Pagination: React.FC<PaginationProps>;

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { Pagination } from "./Pagination";
+export type { PaginationProps } from "./Pagination";

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./Tabs.css";
+export interface TabItem {
+    id: string;
+    label: string;
+    count?: number;
+    disabled?: boolean;
+    content?: React.ReactNode;
+}
+export interface TabsProps {
+    items: TabItem[];
+    defaultValue?: string;
+    value?: string;
+    onChange?: (id: string) => void;
+    className?: string;
+}
+export declare const Tabs: React.FC<TabsProps>;

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs";
+export type { TabsProps, TabItem } from "./Tabs";

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Tag.css";
+export type TagScheme = "brand" | "neutral" | "positive" | "warning" | "danger";
+export type TagVariant = "primary" | "secondary";
+export interface TagProps {
+    label: string;
+    scheme?: TagScheme;
+    variant?: TagVariant;
+    removable?: boolean;
+    onRemove?: () => void;
+    className?: string;
+}
+export declare const Tag: React.FC<TagProps>;

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag } from "./Tag";
+export type { TagProps, TagScheme, TagVariant } from "./Tag";

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./Tooltip.css";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+export interface TooltipProps {
+    content: string;
+    placement?: TooltipPlacement;
+    children: React.ReactElement;
+    delay?: number;
+}
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from "./Tooltip";
+export type { TooltipProps, TooltipPlacement } from "./Tooltip";

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),u=require("react"),y=({items:d,multiple:i=!1,defaultOpen:s=[],className:e=""})=>{const[c,o]=u.useState(s),t=l=>{o(n=>n.includes(l)?n.filter(f=>f!==l):i?[...n,l]:[l])};return a.jsx("div",{className:["df-accordion",e].filter(Boolean).join(" "),children:d.map(l=>{const n=c.includes(l.id);return a.jsxs("div",{className:["df-accordion__item",n?"df-accordion__item--open":""].filter(Boolean).join(" "),children:[a.jsxs("button",{className:"df-accordion__trigger",onClick:()=>!l.disabled&&t(l.id),"aria-expanded":n,disabled:l.disabled,children:[a.jsx("span",{children:l.title}),a.jsx("span",{className:"df-accordion__chevron","aria-hidden":"true",children:"▾"})]}),n&&a.jsx("div",{className:"df-accordion__content",children:l.content})]},l.id)})})},C={sm:24,md:32,lg:40,xl:56},k={sm:"10px",md:"12px",lg:"14px",xl:"18px"};function w(d){const i=["#6366f1","#3d5af8","#0ba360","#f59e0b","#ef4444","#0ea5e9","#d946ef","#10b981"];let s=0;for(let e=0;e<d.length;e++)s=d.charCodeAt(e)+((s<<5)-s);return i[Math.abs(s)%i.length]}const N=({src:d,alt:i="",initials:s,size:e="md",shape:c="circle",color:o,className:t=""})=>{const l=C[e],n=o??(s?w(s):"#6366f1");return a.jsx("span",{className:["df-avatar",`df-avatar--${e}`,`df-avatar--${c}`,t].filter(Boolean).join(" "),style:{width:l,height:l},role:"img","aria-label":i||s,children:d?a.jsx("img",{src:d,alt:i,className:"df-avatar__img"}):a.jsx("span",{className:"df-avatar__initials",style:{backgroundColor:n,fontSize:k[e]},children:s==null?void 0:s.slice(0,2).toUpperCase()})})},M=({avatars:d,max:i=4,size:s="md"})=>{const e=d.slice(0,i),c=d.length-i;return a.jsxs("div",{className:"df-avatar-group",children:[e.map((o,t)=>a.jsx(N,{...o,size:s},t)),c>0&&a.jsx("span",{className:["df-avatar",`df-avatar--${s}`,"df-avatar--circle","df-avatar__overflow"].join(" "),children:a.jsxs("span",{className:"df-avatar__initials",style:{backgroundColor:"var(--df-color-neutral-300)"},children:["+",c]})})]})},A=({label:d,scheme:i="brand",dot:s=!1,className:e=""})=>a.jsx("span",{className:["df-badge",`df-badge--${i}`,s?"df-badge--dot":"",e].filter(Boolean).join(" "),children:s?null:d}),g=u.forwardRef(({variant:d="primary",size:i="md",loading:s=!1,iconStart:e,iconEnd:c,fullWidth:o=!1,children:t,disabled:l,className:n="",...f},h)=>{const _=l||s;return a.jsxs("button",{ref:h,className:["df-btn",`df-btn--${d}`,`df-btn--${i}`,o?"df-btn--full":"",s?"df-btn--loading":"",n].filter(Boolean).join(" "),disabled:_,"aria-busy":s,...f,children:[s&&a.jsx("span",{className:"df-btn__spinner","aria-hidden":"true"}),!s&&e&&a.jsx("span",{className:"df-btn__icon df-btn__icon--start",children:e}),t&&a.jsx("span",{className:"df-btn__label",children:t}),!s&&c&&a.jsx("span",{className:"df-btn__icon df-btn__icon--end",children:c})]})});g.displayName="Button";const T=({heading:d,body:i,image:s,imageAlt:e="",direction:c="vertical",variant:o="default",actions:t,footer:l,className:n="",children:f})=>a.jsxs("div",{className:["df-card",`df-card--${c}`,`df-card--${o}`,n].filter(Boolean).join(" "),children:[s&&a.jsx("div",{className:"df-card__image",children:a.jsx("img",{src:s,alt:e})}),a.jsxs("div",{className:"df-card__body",children:[d&&a.jsx("h3",{className:"df-card__heading",children:d}),i&&a.jsx("p",{className:"df-card__text",children:i}),f,t&&a.jsx("div",{className:"df-card__actions",children:t})]}),l&&a.jsx("div",{className:"df-card__footer",children:l})]}),R=({name:d,role:i,location:s,experience:e,status:c,skills:o=[],avatar:t,actions:l,className:n=""})=>a.jsxs("div",{className:["df-card df-card--horizontal df-card--default",n].join(" "),children:[t&&a.jsx("div",{className:"df-card__avatar",children:t}),a.jsxs("div",{className:"df-card__body",children:[a.jsxs("div",{className:"df-card__top-row",children:[a.jsxs("div",{children:[a.jsx("h3",{className:"df-card__heading",children:d}),a.jsx("p",{className:"df-card__text",children:i})]}),c&&a.jsx("div",{children:c})]}),(s||e)&&a.jsxs("div",{className:"df-card__meta",children:[s&&a.jsxs("span",{children:["📍 ",s]}),e&&a.jsxs("span",{children:["💼 ",e]})]}),o.length>0&&a.jsx("div",{className:"df-card__tags",children:o.map(f=>a.jsx("span",{className:"df-card__skill-tag",children:f},f))}),l&&a.jsx("div",{className:"df-card__actions",children:l})]})]}),E=({open:d,onClose:i,title:s,description:e,size:c="md",children:o,footer:t})=>{const l=u.useRef(null);return u.useEffect(()=>{var f,h;const n=l.current;n&&(d?(f=n.showModal)==null||f.call(n):(h=n.close)==null||h.call(n))},[d]),u.useEffect(()=>{const n=l.current,f=h=>{h.target===n&&i()};return n==null||n.addEventListener("click",f),()=>n==null?void 0:n.removeEventListener("click",f)},[i]),d?a.jsx("div",{className:"df-dialog-backdrop",onClick:i,role:"presentation",children:a.jsxs("div",{className:["df-dialog",`df-dialog--${c}`].join(" "),role:"dialog","aria-modal":"true","aria-labelledby":s?"df-dialog-title":void 0,onClick:n=>n.stopPropagation(),children:[a.jsxs("div",{className:"df-dialog__header",children:[s&&a.jsx("h2",{id:"df-dialog-title",className:"df-dialog__title",children:s}),a.jsx("button",{className:"df-dialog__close",onClick:i,"aria-label":"Close",children:"✕"})]}),e&&a.jsx("p",{className:"df-dialog__description",children:e}),o&&a.jsx("div",{className:"df-dialog__body",children:o}),t&&a.jsx("div",{className:"df-dialog__footer",children:t})]})}):null},$=u.forwardRef(({label:d,hint:i,error:s,size:e="md",iconStart:c,iconEnd:o,fullWidth:t,className:l="",id:n,...f},h)=>{const _=n??`df-input-${Math.random().toString(36).slice(2)}`;return a.jsxs("div",{className:["df-input-wrapper",t?"df-input-wrapper--full":"",l].filter(Boolean).join(" "),children:[d&&a.jsx("label",{className:"df-input__label",htmlFor:_,children:d}),a.jsxs("div",{className:["df-input__field-wrap",s?"df-input__field-wrap--error":""].filter(Boolean).join(" "),children:[c&&a.jsx("span",{className:"df-input__icon df-input__icon--start",children:c}),a.jsx("input",{ref:h,id:_,className:["df-input__field",`df-input__field--${e}`,c?"df-input__field--icon-start":"",o?"df-input__field--icon-end":""].filter(Boolean).join(" "),"aria-describedby":s?`${_}-error`:i?`${_}-hint`:void 0,"aria-invalid":!!s,...f}),o&&a.jsx("span",{className:"df-input__icon df-input__icon--end",children:o})]}),s&&a.jsx("span",{id:`${_}-error`,className:"df-input__error",role:"alert",children:s}),!s&&i&&a.jsx("span",{id:`${_}-hint`,className:"df-input__hint",children:i})]})});$.displayName="Input";const I=({items:d,activeId:i,onSelect:s,logo:e,collapsed:c=!1,className:o=""})=>{const[t,l]=u.useState(i??""),[n,f]=u.useState([]),h=r=>{l(r),s==null||s(r)},_=r=>{f(j=>j.includes(r)?j.filter(m=>m!==r):[...j,r])},p=(r,j=0)=>{const m=r.children&&r.children.length>0,b=n.includes(r.id),v=t===r.id;return a.jsxs("li",{className:"df-nav__item",children:[a.jsxs("button",{className:["df-nav__btn",v?"df-nav__btn--active":"",j>0?"df-nav__btn--sub":""].filter(Boolean).join(" "),onClick:()=>m?_(r.id):h(r.id),"aria-current":v?"page":void 0,children:[r.icon&&a.jsx("span",{className:"df-nav__icon",children:r.icon}),!c&&a.jsx("span",{className:"df-nav__label",children:r.label}),!c&&r.badge!==void 0&&a.jsx("span",{className:"df-nav__badge",children:r.badge}),!c&&m&&a.jsx("span",{className:"df-nav__chevron",style:{transform:b?"rotate(180deg)":void 0},children:"▾"})]}),m&&b&&!c&&a.jsx("ul",{className:"df-nav__sub",children:r.children.map(B=>p(B,j+1))})]},r.id)};return a.jsxs("nav",{className:["df-nav",c?"df-nav--collapsed":"",o].filter(Boolean).join(" "),children:[e&&a.jsx("div",{className:"df-nav__logo",children:e}),a.jsx("ul",{className:"df-nav__list",children:d.map(r=>p(r))})]})},S={info:"ℹ",positive:"✓",warning:"⚠",danger:"✕"},L=({scheme:d="info",title:i,message:s,dismissible:e=!1,onDismiss:c,className:o=""})=>{const[t,l]=u.useState(!0);if(!t)return null;const n=()=>{l(!1),c==null||c()};return a.jsxs("div",{className:["df-notification",`df-notification--${d}`,o].filter(Boolean).join(" "),role:"alert",children:[a.jsx("span",{className:"df-notification__icon","aria-hidden":"true",children:S[d]}),a.jsxs("div",{className:"df-notification__body",children:[i&&a.jsx("strong",{className:"df-notification__title",children:i}),a.jsx("span",{className:"df-notification__message",children:s})]}),e&&a.jsx("button",{className:"df-notification__dismiss",onClick:n,"aria-label":"Dismiss",children:"✕"})]})};function x(d,i){return Array.from({length:i-d+1},(s,e)=>d+e)}const O=({totalItems:d,pageSize:i=10,currentPage:s,onPageChange:e,siblingCount:c=1,className:o=""})=>{const t=Math.ceil(d/i);if(t<=1)return null;const l=c,n=Math.max(s-l,1),f=Math.min(s+l,t),h=n>2,_=f<t-1,p=[];return p.push(1),h?p.push("..."):n>2&&x(2,n-1).forEach(r=>p.push(r)),x(n,f).forEach(r=>{r!==1&&r!==t&&p.push(r)}),_?p.push("..."):f<t-1&&x(f+1,t-1).forEach(r=>p.push(r)),t>1&&p.push(t),a.jsxs("nav",{className:["df-pagination",o].filter(Boolean).join(" "),"aria-label":"Pagination",children:[a.jsx("button",{className:"df-pagination__btn",disabled:s===1,onClick:()=>e(s-1),"aria-label":"Previous page",children:"‹"}),p.map((r,j)=>r==="..."?a.jsx("span",{className:"df-pagination__dots",children:"…"},`dots-${j}`):a.jsx("button",{className:["df-pagination__btn",r===s?"df-pagination__btn--active":""].filter(Boolean).join(" "),onClick:()=>e(r),"aria-current":r===s?"page":void 0,children:r},r)),a.jsx("button",{className:"df-pagination__btn",disabled:s===t,onClick:()=>e(s+1),"aria-label":"Next page",children:"›"})]})},q=({items:d,defaultValue:i,value:s,onChange:e,className:c=""})=>{var h;const[o,t]=u.useState(i??((h=d[0])==null?void 0:h.id)),l=s??o,n=_=>{s||t(_),e==null||e(_)},f=d.find(_=>_.id===l);return a.jsxs("div",{className:["df-tabs",c].filter(Boolean).join(" "),children:[a.jsx("div",{className:"df-tabs__list",role:"tablist",children:d.map(_=>a.jsxs("button",{role:"tab","aria-selected":_.id===l,"aria-controls":`panel-${_.id}`,id:`tab-${_.id}`,disabled:_.disabled,onClick:()=>n(_.id),className:["df-tabs__tab",_.id===l?"df-tabs__tab--active":""].filter(Boolean).join(" "),children:[_.label,_.count!==void 0&&a.jsx("span",{className:"df-tabs__count",children:_.count})]},_.id))}),(f==null?void 0:f.content)&&a.jsx("div",{id:`panel-${f.id}`,role:"tabpanel","aria-labelledby":`tab-${f.id}`,className:"df-tabs__panel",children:f.content})]})},D=({label:d,scheme:i="neutral",variant:s="secondary",removable:e=!1,onRemove:c,className:o=""})=>a.jsxs("span",{className:["df-tag",`df-tag--${i}`,`df-tag--${s}`,o].filter(Boolean).join(" "),children:[a.jsx("span",{className:"df-tag__label",children:d}),e&&a.jsx("button",{type:"button",className:"df-tag__remove",onClick:c,"aria-label":`Remove ${d}`,children:"×"})]}),F=({content:d,placement:i="top",children:s,delay:e=300})=>{const[c,o]=u.useState(!1),t=u.useRef(null),l=()=>{t.current=setTimeout(()=>o(!0),e)},n=()=>{t.current&&clearTimeout(t.current),o(!1)};return a.jsxs("span",{className:"df-tooltip-wrapper",onMouseEnter:l,onMouseLeave:n,onFocus:l,onBlur:n,children:[s,c&&a.jsx("span",{className:["df-tooltip",`df-tooltip--${i}`].join(" "),role:"tooltip",children:d})]})};exports.Accordion=y;exports.Avatar=N;exports.AvatarGroup=M;exports.Badge=A;exports.Button=g;exports.CandidateCard=R;exports.Card=T;exports.Dialog=E;exports.Input=$;exports.Navigation=I;exports.Notification=L;exports.Pagination=O;exports.Tabs=q;exports.Tag=D;exports.Tooltip=F;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import "./tokens/index.css";
+export * from "./components/Accordion";
+export * from "./components/Avatar";
+export * from "./components/Badge";
+export * from "./components/Button";
+export * from "./components/Card";
+export * from "./components/Dialog";
+export * from "./components/Input";
+export * from "./components/Navigation";
+export * from "./components/Notification";
+export * from "./components/Pagination";
+export * from "./components/Tabs";
+export * from "./components/Tag";
+export * from "./components/Tooltip";

package/dist/index.es.js

@@ -0,0 +1,432 @@
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import B, { useState as b, useRef as y, useEffect as j } from "react";
+const L = ({ items: i, multiple: l = !1, defaultOpen: a = [], className: e = "" }) => {
+  const [t, o] = b(a), c = (s) => {
+    o(
+      (d) => d.includes(s) ? d.filter((f) => f !== s) : l ? [...d, s] : [s]
+    );
+  };
+  return /* @__PURE__ */ n("div", { className: ["df-accordion", e].filter(Boolean).join(" "), children: i.map((s) => {
+    const d = t.includes(s.id);
+    return /* @__PURE__ */ h("div", { className: ["df-accordion__item", d ? "df-accordion__item--open" : ""].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ h(
+        "button",
+        {
+          className: "df-accordion__trigger",
+          onClick: () => !s.disabled && c(s.id),
+          "aria-expanded": d,
+          disabled: s.disabled,
+          children: [
+            /* @__PURE__ */ n("span", { children: s.title }),
+            /* @__PURE__ */ n("span", { className: "df-accordion__chevron", "aria-hidden": "true", children: "▾" })
+          ]
+        }
+      ),
+      d && /* @__PURE__ */ n("div", { className: "df-accordion__content", children: s.content })
+    ] }, s.id);
+  }) });
+}, w = { sm: 24, md: 32, lg: 40, xl: 56 }, x = { sm: "10px", md: "12px", lg: "14px", xl: "18px" };
+function C(i) {
+  const l = [
+    "#6366f1",
+    "#3d5af8",
+    "#0ba360",
+    "#f59e0b",
+    "#ef4444",
+    "#0ea5e9",
+    "#d946ef",
+    "#10b981"
+  ];
+  let a = 0;
+  for (let e = 0; e < i.length; e++) a = i.charCodeAt(e) + ((a << 5) - a);
+  return l[Math.abs(a) % l.length];
+}
+const M = ({
+  src: i,
+  alt: l = "",
+  initials: a,
+  size: e = "md",
+  shape: t = "circle",
+  color: o,
+  className: c = ""
+}) => {
+  const s = w[e], d = o ?? (a ? C(a) : "#6366f1");
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      className: ["df-avatar", `df-avatar--${e}`, `df-avatar--${t}`, c].filter(Boolean).join(" "),
+      style: { width: s, height: s },
+      role: "img",
+      "aria-label": l || a,
+      children: i ? /* @__PURE__ */ n("img", { src: i, alt: l, className: "df-avatar__img" }) : /* @__PURE__ */ n(
+        "span",
+        {
+          className: "df-avatar__initials",
+          style: { backgroundColor: d, fontSize: x[e] },
+          children: a == null ? void 0 : a.slice(0, 2).toUpperCase()
+        }
+      )
+    }
+  );
+}, F = ({ avatars: i, max: l = 4, size: a = "md" }) => {
+  const e = i.slice(0, l), t = i.length - l;
+  return /* @__PURE__ */ h("div", { className: "df-avatar-group", children: [
+    e.map((o, c) => /* @__PURE__ */ n(M, { ...o, size: a }, c)),
+    t > 0 && /* @__PURE__ */ n("span", { className: ["df-avatar", `df-avatar--${a}`, "df-avatar--circle", "df-avatar__overflow"].join(" "), children: /* @__PURE__ */ h("span", { className: "df-avatar__initials", style: { backgroundColor: "var(--df-color-neutral-300)" }, children: [
+      "+",
+      t
+    ] }) })
+  ] });
+}, O = ({ label: i, scheme: l = "brand", dot: a = !1, className: e = "" }) => /* @__PURE__ */ n("span", { className: ["df-badge", `df-badge--${l}`, a ? "df-badge--dot" : "", e].filter(Boolean).join(" "), children: a ? null : i }), A = B.forwardRef(
+  ({
+    variant: i = "primary",
+    size: l = "md",
+    loading: a = !1,
+    iconStart: e,
+    iconEnd: t,
+    fullWidth: o = !1,
+    children: c,
+    disabled: s,
+    className: d = "",
+    ...f
+  }, p) => {
+    const _ = s || a;
+    return /* @__PURE__ */ h(
+      "button",
+      {
+        ref: p,
+        className: [
+          "df-btn",
+          `df-btn--${i}`,
+          `df-btn--${l}`,
+          o ? "df-btn--full" : "",
+          a ? "df-btn--loading" : "",
+          d
+        ].filter(Boolean).join(" "),
+        disabled: _,
+        "aria-busy": a,
+        ...f,
+        children: [
+          a && /* @__PURE__ */ n("span", { className: "df-btn__spinner", "aria-hidden": "true" }),
+          !a && e && /* @__PURE__ */ n("span", { className: "df-btn__icon df-btn__icon--start", children: e }),
+          c && /* @__PURE__ */ n("span", { className: "df-btn__label", children: c }),
+          !a && t && /* @__PURE__ */ n("span", { className: "df-btn__icon df-btn__icon--end", children: t })
+        ]
+      }
+    );
+  }
+);
+A.displayName = "Button";
+const V = ({
+  heading: i,
+  body: l,
+  image: a,
+  imageAlt: e = "",
+  direction: t = "vertical",
+  variant: o = "default",
+  actions: c,
+  footer: s,
+  className: d = "",
+  children: f
+}) => /* @__PURE__ */ h(
+  "div",
+  {
+    className: [
+      "df-card",
+      `df-card--${t}`,
+      `df-card--${o}`,
+      d
+    ].filter(Boolean).join(" "),
+    children: [
+      a && /* @__PURE__ */ n("div", { className: "df-card__image", children: /* @__PURE__ */ n("img", { src: a, alt: e }) }),
+      /* @__PURE__ */ h("div", { className: "df-card__body", children: [
+        i && /* @__PURE__ */ n("h3", { className: "df-card__heading", children: i }),
+        l && /* @__PURE__ */ n("p", { className: "df-card__text", children: l }),
+        f,
+        c && /* @__PURE__ */ n("div", { className: "df-card__actions", children: c })
+      ] }),
+      s && /* @__PURE__ */ n("div", { className: "df-card__footer", children: s })
+    ]
+  }
+), D = ({
+  name: i,
+  role: l,
+  location: a,
+  experience: e,
+  status: t,
+  skills: o = [],
+  avatar: c,
+  actions: s,
+  className: d = ""
+}) => /* @__PURE__ */ h("div", { className: ["df-card df-card--horizontal df-card--default", d].join(" "), children: [
+  c && /* @__PURE__ */ n("div", { className: "df-card__avatar", children: c }),
+  /* @__PURE__ */ h("div", { className: "df-card__body", children: [
+    /* @__PURE__ */ h("div", { className: "df-card__top-row", children: [
+      /* @__PURE__ */ h("div", { children: [
+        /* @__PURE__ */ n("h3", { className: "df-card__heading", children: i }),
+        /* @__PURE__ */ n("p", { className: "df-card__text", children: l })
+      ] }),
+      t && /* @__PURE__ */ n("div", { children: t })
+    ] }),
+    (a || e) && /* @__PURE__ */ h("div", { className: "df-card__meta", children: [
+      a && /* @__PURE__ */ h("span", { children: [
+        "📍 ",
+        a
+      ] }),
+      e && /* @__PURE__ */ h("span", { children: [
+        "💼 ",
+        e
+      ] })
+    ] }),
+    o.length > 0 && /* @__PURE__ */ n("div", { className: "df-card__tags", children: o.map((f) => /* @__PURE__ */ n("span", { className: "df-card__skill-tag", children: f }, f)) }),
+    s && /* @__PURE__ */ n("div", { className: "df-card__actions", children: s })
+  ] })
+] }), G = ({ open: i, onClose: l, title: a, description: e, size: t = "md", children: o, footer: c }) => {
+  const s = y(null);
+  return j(() => {
+    var f, p;
+    const d = s.current;
+    d && (i ? (f = d.showModal) == null || f.call(d) : (p = d.close) == null || p.call(d));
+  }, [i]), j(() => {
+    const d = s.current, f = (p) => {
+      p.target === d && l();
+    };
+    return d == null || d.addEventListener("click", f), () => d == null ? void 0 : d.removeEventListener("click", f);
+  }, [l]), i ? /* @__PURE__ */ n("div", { className: "df-dialog-backdrop", onClick: l, role: "presentation", children: /* @__PURE__ */ h(
+    "div",
+    {
+      className: ["df-dialog", `df-dialog--${t}`].join(" "),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": a ? "df-dialog-title" : void 0,
+      onClick: (d) => d.stopPropagation(),
+      children: [
+        /* @__PURE__ */ h("div", { className: "df-dialog__header", children: [
+          a && /* @__PURE__ */ n("h2", { id: "df-dialog-title", className: "df-dialog__title", children: a }),
+          /* @__PURE__ */ n("button", { className: "df-dialog__close", onClick: l, "aria-label": "Close", children: "✕" })
+        ] }),
+        e && /* @__PURE__ */ n("p", { className: "df-dialog__description", children: e }),
+        o && /* @__PURE__ */ n("div", { className: "df-dialog__body", children: o }),
+        c && /* @__PURE__ */ n("div", { className: "df-dialog__footer", children: c })
+      ]
+    }
+  ) }) : null;
+}, E = B.forwardRef(
+  ({ label: i, hint: l, error: a, size: e = "md", iconStart: t, iconEnd: o, fullWidth: c, className: s = "", id: d, ...f }, p) => {
+    const _ = d ?? `df-input-${Math.random().toString(36).slice(2)}`;
+    return /* @__PURE__ */ h("div", { className: ["df-input-wrapper", c ? "df-input-wrapper--full" : "", s].filter(Boolean).join(" "), children: [
+      i && /* @__PURE__ */ n("label", { className: "df-input__label", htmlFor: _, children: i }),
+      /* @__PURE__ */ h("div", { className: ["df-input__field-wrap", a ? "df-input__field-wrap--error" : ""].filter(Boolean).join(" "), children: [
+        t && /* @__PURE__ */ n("span", { className: "df-input__icon df-input__icon--start", children: t }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: p,
+            id: _,
+            className: ["df-input__field", `df-input__field--${e}`, t ? "df-input__field--icon-start" : "", o ? "df-input__field--icon-end" : ""].filter(Boolean).join(" "),
+            "aria-describedby": a ? `${_}-error` : l ? `${_}-hint` : void 0,
+            "aria-invalid": !!a,
+            ...f
+          }
+        ),
+        o && /* @__PURE__ */ n("span", { className: "df-input__icon df-input__icon--end", children: o })
+      ] }),
+      a && /* @__PURE__ */ n("span", { id: `${_}-error`, className: "df-input__error", role: "alert", children: a }),
+      !a && l && /* @__PURE__ */ n("span", { id: `${_}-hint`, className: "df-input__hint", children: l })
+    ] });
+  }
+);
+E.displayName = "Input";
+const U = ({ items: i, activeId: l, onSelect: a, logo: e, collapsed: t = !1, className: o = "" }) => {
+  const [c, s] = b(l ?? ""), [d, f] = b([]), p = (r) => {
+    s(r), a == null || a(r);
+  }, _ = (r) => {
+    f((u) => u.includes(r) ? u.filter((N) => N !== r) : [...u, r]);
+  }, m = (r, u = 0) => {
+    const N = r.children && r.children.length > 0, g = d.includes(r.id), $ = c === r.id;
+    return /* @__PURE__ */ h("li", { className: "df-nav__item", children: [
+      /* @__PURE__ */ h(
+        "button",
+        {
+          className: ["df-nav__btn", $ ? "df-nav__btn--active" : "", u > 0 ? "df-nav__btn--sub" : ""].filter(Boolean).join(" "),
+          onClick: () => N ? _(r.id) : p(r.id),
+          "aria-current": $ ? "page" : void 0,
+          children: [
+            r.icon && /* @__PURE__ */ n("span", { className: "df-nav__icon", children: r.icon }),
+            !t && /* @__PURE__ */ n("span", { className: "df-nav__label", children: r.label }),
+            !t && r.badge !== void 0 && /* @__PURE__ */ n("span", { className: "df-nav__badge", children: r.badge }),
+            !t && N && /* @__PURE__ */ n("span", { className: "df-nav__chevron", style: { transform: g ? "rotate(180deg)" : void 0 }, children: "▾" })
+          ]
+        }
+      ),
+      N && g && !t && /* @__PURE__ */ n("ul", { className: "df-nav__sub", children: r.children.map((k) => m(k, u + 1)) })
+    ] }, r.id);
+  };
+  return /* @__PURE__ */ h("nav", { className: ["df-nav", t ? "df-nav--collapsed" : "", o].filter(Boolean).join(" "), children: [
+    e && /* @__PURE__ */ n("div", { className: "df-nav__logo", children: e }),
+    /* @__PURE__ */ n("ul", { className: "df-nav__list", children: i.map((r) => m(r)) })
+  ] });
+}, R = {
+  info: "ℹ",
+  positive: "✓",
+  warning: "⚠",
+  danger: "✕"
+}, q = ({
+  scheme: i = "info",
+  title: l,
+  message: a,
+  dismissible: e = !1,
+  onDismiss: t,
+  className: o = ""
+}) => {
+  const [c, s] = b(!0);
+  if (!c) return null;
+  const d = () => {
+    s(!1), t == null || t();
+  };
+  return /* @__PURE__ */ h("div", { className: ["df-notification", `df-notification--${i}`, o].filter(Boolean).join(" "), role: "alert", children: [
+    /* @__PURE__ */ n("span", { className: "df-notification__icon", "aria-hidden": "true", children: R[i] }),
+    /* @__PURE__ */ h("div", { className: "df-notification__body", children: [
+      l && /* @__PURE__ */ n("strong", { className: "df-notification__title", children: l }),
+      /* @__PURE__ */ n("span", { className: "df-notification__message", children: a })
+    ] }),
+    e && /* @__PURE__ */ n("button", { className: "df-notification__dismiss", onClick: d, "aria-label": "Dismiss", children: "✕" })
+  ] });
+};
+function v(i, l) {
+  return Array.from({ length: l - i + 1 }, (a, e) => i + e);
+}
+const z = ({
+  totalItems: i,
+  pageSize: l = 10,
+  currentPage: a,
+  onPageChange: e,
+  siblingCount: t = 1,
+  className: o = ""
+}) => {
+  const c = Math.ceil(i / l);
+  if (c <= 1) return null;
+  const s = t, d = Math.max(a - s, 1), f = Math.min(a + s, c), p = d > 2, _ = f < c - 1, m = [];
+  return m.push(1), p ? m.push("...") : d > 2 && v(2, d - 1).forEach((r) => m.push(r)), v(d, f).forEach((r) => {
+    r !== 1 && r !== c && m.push(r);
+  }), _ ? m.push("...") : f < c - 1 && v(f + 1, c - 1).forEach((r) => m.push(r)), c > 1 && m.push(c), /* @__PURE__ */ h("nav", { className: ["df-pagination", o].filter(Boolean).join(" "), "aria-label": "Pagination", children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        className: "df-pagination__btn",
+        disabled: a === 1,
+        onClick: () => e(a - 1),
+        "aria-label": "Previous page",
+        children: "‹"
+      }
+    ),
+    m.map(
+      (r, u) => r === "..." ? /* @__PURE__ */ n("span", { className: "df-pagination__dots", children: "…" }, `dots-${u}`) : /* @__PURE__ */ n(
+        "button",
+        {
+          className: ["df-pagination__btn", r === a ? "df-pagination__btn--active" : ""].filter(Boolean).join(" "),
+          onClick: () => e(r),
+          "aria-current": r === a ? "page" : void 0,
+          children: r
+        },
+        r
+      )
+    ),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        className: "df-pagination__btn",
+        disabled: a === c,
+        onClick: () => e(a + 1),
+        "aria-label": "Next page",
+        children: "›"
+      }
+    )
+  ] });
+}, H = ({ items: i, defaultValue: l, value: a, onChange: e, className: t = "" }) => {
+  var p;
+  const [o, c] = b(l ?? ((p = i[0]) == null ? void 0 : p.id)), s = a ?? o, d = (_) => {
+    a || c(_), e == null || e(_);
+  }, f = i.find((_) => _.id === s);
+  return /* @__PURE__ */ h("div", { className: ["df-tabs", t].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ n("div", { className: "df-tabs__list", role: "tablist", children: i.map((_) => /* @__PURE__ */ h(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": _.id === s,
+        "aria-controls": `panel-${_.id}`,
+        id: `tab-${_.id}`,
+        disabled: _.disabled,
+        onClick: () => d(_.id),
+        className: ["df-tabs__tab", _.id === s ? "df-tabs__tab--active" : ""].filter(Boolean).join(" "),
+        children: [
+          _.label,
+          _.count !== void 0 && /* @__PURE__ */ n("span", { className: "df-tabs__count", children: _.count })
+        ]
+      },
+      _.id
+    )) }),
+    (f == null ? void 0 : f.content) && /* @__PURE__ */ n(
+      "div",
+      {
+        id: `panel-${f.id}`,
+        role: "tabpanel",
+        "aria-labelledby": `tab-${f.id}`,
+        className: "df-tabs__panel",
+        children: f.content
+      }
+    )
+  ] });
+}, J = ({
+  label: i,
+  scheme: l = "neutral",
+  variant: a = "secondary",
+  removable: e = !1,
+  onRemove: t,
+  className: o = ""
+}) => /* @__PURE__ */ h(
+  "span",
+  {
+    className: ["df-tag", `df-tag--${l}`, `df-tag--${a}`, o].filter(Boolean).join(" "),
+    children: [
+      /* @__PURE__ */ n("span", { className: "df-tag__label", children: i }),
+      e && /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "df-tag__remove",
+          onClick: t,
+          "aria-label": `Remove ${i}`,
+          children: "×"
+        }
+      )
+    ]
+  }
+), K = ({ content: i, placement: l = "top", children: a, delay: e = 300 }) => {
+  const [t, o] = b(!1), c = y(null), s = () => {
+    c.current = setTimeout(() => o(!0), e);
+  }, d = () => {
+    c.current && clearTimeout(c.current), o(!1);
+  };
+  return /* @__PURE__ */ h("span", { className: "df-tooltip-wrapper", onMouseEnter: s, onMouseLeave: d, onFocus: s, onBlur: d, children: [
+    a,
+    t && /* @__PURE__ */ n("span", { className: ["df-tooltip", `df-tooltip--${l}`].join(" "), role: "tooltip", children: i })
+  ] });
+};
+export {
+  L as Accordion,
+  M as Avatar,
+  F as AvatarGroup,
+  O as Badge,
+  A as Button,
+  D as CandidateCard,
+  V as Card,
+  G as Dialog,
+  E as Input,
+  U as Navigation,
+  q as Notification,
+  z as Pagination,
+  H as Tabs,
+  J as Tag,
+  K as Tooltip
+};

package/dist/styles.css

@@ -0,0 +1 @@
+:root{--df-color-brand-50: #eef2ff;--df-color-brand-100: #e0e7ff;--df-color-brand-200: #c7d2fe;--df-color-brand-300: #a5b4fc;--df-color-brand-400: #818cf8;--df-color-brand-500: #6366f1;--df-color-brand-600: #3d5af8;--df-color-brand-700: #2d4af0;--df-color-brand-800: #1e3a8a;--df-color-brand-900: #1e2e6e;--df-color-neutral-0: #ffffff;--df-color-neutral-50: #f8f9fa;--df-color-neutral-100: #f1f3f5;--df-color-neutral-200: #e9ecef;--df-color-neutral-300: #dee2e6;--df-color-neutral-400: #ced4da;--df-color-neutral-500: #adb5bd;--df-color-neutral-600: #6c757d;--df-color-neutral-700: #495057;--df-color-neutral-800: #343a40;--df-color-neutral-900: #121212;--df-color-positive-light: #ecfdf5;--df-color-positive: #12b76a;--df-color-positive-dark: #057a55;--df-color-warning-light: #fffbeb;--df-color-warning: #f59e0b;--df-color-warning-dark: #b45309;--df-color-danger-light: #fef2f2;--df-color-danger: #ef4444;--df-color-danger-dark: #b91c1c;--df-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--df-font-size-xs: .75rem;--df-font-size-sm: .875rem;--df-font-size-base: 1rem;--df-font-size-lg: 1.125rem;--df-font-size-xl: 1.25rem;--df-font-size-2xl: 1.5rem;--df-font-size-3xl: 1.875rem;--df-font-weight-regular: 400;--df-font-weight-medium: 500;--df-font-weight-semibold: 600;--df-font-weight-bold: 700;--df-line-height-tight: 1.25;--df-line-height-normal: 1.5;--df-line-height-loose: 1.75;--df-space-1: .25rem;--df-space-2: .5rem;--df-space-3: .75rem;--df-space-4: 1rem;--df-space-5: 1.25rem;--df-space-6: 1.5rem;--df-space-8: 2rem;--df-space-10: 2.5rem;--df-space-12: 3rem;--df-radius-sm: 4px;--df-radius-md: 8px;--df-radius-lg: 12px;--df-radius-xl: 16px;--df-radius-full: 9999px;--df-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);--df-shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);--df-shadow-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);--df-shadow-xl: 0 20px 25px rgba(0,0,0,.08), 0 10px 10px rgba(0,0,0,.03);--df-transition-fast: .1s ease;--df-transition-normal: .2s ease;--df-transition-slow: .3s ease;--df-z-dropdown: 1000;--df-z-sticky: 1100;--df-z-modal: 1200;--df-z-tooltip: 1300}.df-accordion{font-family:var(--df-font-family);border:1.5px solid var(--df-color-neutral-200);border-radius:var(--df-radius-lg);overflow:hidden}.df-accordion__item{border-bottom:1px solid var(--df-color-neutral-200)}.df-accordion__item:last-child{border-bottom:none}.df-accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--df-space-4) var(--df-space-5);background:none;border:none;cursor:pointer;font-family:var(--df-font-family);font-size:var(--df-font-size-sm);font-weight:var(--df-font-weight-semibold);color:var(--df-color-neutral-800);text-align:left;transition:background var(--df-transition-fast)}.df-accordion__trigger:hover:not(:disabled){background:var(--df-color-neutral-50)}.df-accordion__trigger:disabled{opacity:.5;cursor:not-allowed}.df-accordion__chevron{font-size:14px;color:var(--df-color-neutral-500);transition:transform var(--df-transition-normal)}.df-accordion__item--open .df-accordion__chevron{transform:rotate(180deg)}.df-accordion__content{padding:0 var(--df-space-5) var(--df-space-4);font-size:var(--df-font-size-sm);color:var(--df-color-neutral-600);line-height:var(--df-line-height-normal)}.df-avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;vertical-align:middle}.df-avatar--circle{border-radius:50%}.df-avatar--square{border-radius:var(--df-radius-md)}.df-avatar__img{width:100%;height:100%;object-fit:cover}.df-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff;font-family:var(--df-font-family);font-weight:var(--df-font-weight-semibold);letter-spacing:.02em}.df-avatar-group{display:flex;flex-direction:row-reverse;width:fit-content}.df-avatar-group .df-avatar{border:2px solid white;margin-left:-8px}.df-avatar-group .df-avatar:last-child{margin-left:0}.df-avatar__overflow .df-avatar__initials{color:var(--df-color-neutral-700);font-size:11px}.df-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--df-radius-full);font-family:var(--df-font-family);font-size:11px;font-weight:var(--df-font-weight-semibold);line-height:1}.df-badge--dot{min-width:8px;height:8px;padding:0;border-radius:50%}.df-badge--brand{background:var(--df-color-brand-600);color:#fff}.df-badge--neutral{background:var(--df-color-neutral-500);color:#fff}.df-badge--positive{background:var(--df-color-positive);color:#fff}.df-badge--warning{background:var(--df-color-warning);color:#fff}.df-badge--danger{background:var(--df-color-danger);color:#fff}.df-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--df-space-2);border:1.5px solid transparent;border-radius:var(--df-radius-md);font-family:var(--df-font-family);font-weight:var(--df-font-weight-semibold);cursor:pointer;transition:background var(--df-transition-fast),box-shadow var(--df-transition-fast),opacity var(--df-transition-fast);white-space:nowrap;text-decoration:none;position:relative;outline:none}.df-btn:focus-visible{box-shadow:0 0 0 3px var(--df-color-brand-200)}.df-btn--sm{height:32px;padding:0 var(--df-space-3);font-size:var(--df-font-size-xs)}.df-btn--md{height:40px;padding:0 var(--df-space-4);font-size:var(--df-font-size-sm)}.df-btn--lg{height:48px;padding:0 var(--df-space-6);font-size:var(--df-font-size-base)}.df-btn--full{width:100%}.df-btn--primary{background:var(--df-color-brand-600);color:var(--df-color-neutral-0);border-color:var(--df-color-brand-600)}.df-btn--primary:hover:not(:disabled){background:var(--df-color-brand-700);border-color:var(--df-color-brand-700)}.df-btn--neutral{background:var(--df-color-neutral-0);color:var(--df-color-neutral-800);border-color:var(--df-color-neutral-300)}.df-btn--neutral:hover:not(:disabled){background:var(--df-color-neutral-50);border-color:var(--df-color-neutral-400)}.df-btn--danger{background:var(--df-color-danger);color:var(--df-color-neutral-0);border-color:var(--df-color-danger)}.df-btn--danger:hover:not(:disabled){background:var(--df-color-danger-dark);border-color:var(--df-color-danger-dark)}.df-btn--ghost{background:transparent;color:var(--df-color-brand-600);border-color:transparent}.df-btn--ghost:hover:not(:disabled){background:var(--df-color-brand-50)}.df-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.df-btn--loading{cursor:wait}.df-btn__spinner{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:df-spin .6s linear infinite;flex-shrink:0}@keyframes df-spin{to{transform:rotate(360deg)}}.df-btn__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em}.df-card{background:var(--df-color-neutral-0);border-radius:var(--df-radius-lg);overflow:hidden;font-family:var(--df-font-family)}.df-card--default{box-shadow:var(--df-shadow-sm);border:1px solid var(--df-color-neutral-200)}.df-card--stroke{border:1.5px solid var(--df-color-neutral-300)}.df-card--vertical{display:flex;flex-direction:column}.df-card--horizontal{display:flex;flex-direction:row;align-items:flex-start;gap:var(--df-space-4);padding:var(--df-space-5)}.df-card__image{width:100%}.df-card__image img{width:100%;height:200px;object-fit:cover;display:block}.df-card--vertical .df-card__body{padding:var(--df-space-5);flex:1;display:flex;flex-direction:column;gap:var(--df-space-3)}.df-card--horizontal .df-card__body{flex:1;display:flex;flex-direction:column;gap:var(--df-space-2)}.df-card__heading{margin:0;font-size:var(--df-font-size-base);font-weight:var(--df-font-weight-bold);color:var(--df-color-neutral-900)}.df-card__text{margin:0;font-size:var(--df-font-size-sm);color:var(--df-color-neutral-600);line-height:var(--df-line-height-normal)}.df-card__actions{display:flex;gap:var(--df-space-2);margin-top:var(--df-space-2)}.df-card__footer{padding:var(--df-space-4) var(--df-space-5);border-top:1px solid var(--df-color-neutral-200);font-size:var(--df-font-size-xs);color:var(--df-color-neutral-500)}.df-card__avatar{flex-shrink:0}.df-card__top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--df-space-3)}.df-card__meta{display:flex;gap:var(--df-space-4);font-size:var(--df-font-size-xs);color:var(--df-color-neutral-500)}.df-card__tags{display:flex;flex-wrap:wrap;gap:var(--df-space-2)}.df-card__skill-tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--df-radius-full);background:var(--df-color-neutral-100);color:var(--df-color-neutral-700);border:1px solid var(--df-color-neutral-300);font-size:var(--df-font-size-xs);font-weight:var(--df-font-weight-medium)}.df-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:var(--df-z-modal);padding:var(--df-space-4);animation:df-fade-in .15s ease}.df-dialog{background:var(--df-color-neutral-0);border-radius:var(--df-radius-xl);box-shadow:var(--df-shadow-xl);display:flex;flex-direction:column;font-family:var(--df-font-family);animation:df-slide-up .2s ease;max-height:calc(100vh - var(--df-space-8));overflow:hidden}.df-dialog--sm{width:100%;max-width:400px}.df-dialog--md{width:100%;max-width:560px}.df-dialog--lg{width:100%;max-width:760px}.df-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--df-space-5) var(--df-space-6);border-bottom:1px solid var(--df-color-neutral-200)}.df-dialog__title{margin:0;font-size:var(--df-font-size-lg);font-weight:var(--df-font-weight-bold);color:var(--df-color-neutral-900)}.df-dialog__close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--df-color-neutral-500);padding:0;line-height:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--df-radius-md)}.df-dialog__close:hover{background:var(--df-color-neutral-100);color:var(--df-color-neutral-900)}.df-dialog__description{margin:0;padding:var(--df-space-4) var(--df-space-6) 0;font-size:var(--df-font-size-sm);color:var(--df-color-neutral-600)}.df-dialog__body{padding:var(--df-space-5) var(--df-space-6);overflow-y:auto}.df-dialog__footer{display:flex;justify-content:flex-end;gap:var(--df-space-3);padding:var(--df-space-4) var(--df-space-6);border-top:1px solid var(--df-color-neutral-200)}@keyframes df-fade-in{0%{opacity:0}to{opacity:1}}@keyframes df-slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.df-input-wrapper{display:flex;flex-direction:column;gap:var(--df-space-1);font-family:var(--df-font-family)}.df-input-wrapper--full{width:100%}.df-input__label{font-size:var(--df-font-size-sm);font-weight:var(--df-font-weight-medium);color:var(--df-color-neutral-800)}.df-input__field-wrap{position:relative;display:flex;align-items:center}.df-input__field{width:100%;border:1.5px solid var(--df-color-neutral-300);border-radius:var(--df-radius-md);font-family:var(--df-font-family);font-size:var(--df-font-size-sm);color:var(--df-color-neutral-900);background:var(--df-color-neutral-0);outline:none;transition:border-color var(--df-transition-fast),box-shadow var(--df-transition-fast)}.df-input__field--sm{height:32px;padding:0 var(--df-space-3)}.df-input__field--md{height:40px;padding:0 var(--df-space-4)}.df-input__field--lg{height:48px;padding:0 var(--df-space-4);font-size:var(--df-font-size-base)}.df-input__field:focus{border-color:var(--df-color-brand-500);box-shadow:0 0 0 3px var(--df-color-brand-100)}.df-input__field::placeholder{color:var(--df-color-neutral-400)}.df-input__field-wrap--error .df-input__field{border-color:var(--df-color-danger)}.df-input__field-wrap--error .df-input__field:focus{box-shadow:0 0 0 3px var(--df-color-danger-light)}.df-input__field--icon-start{padding-left:var(--df-space-10)}.df-input__field--icon-end{padding-right:var(--df-space-10)}.df-input__icon{position:absolute;display:flex;align-items:center;color:var(--df-color-neutral-500)}.df-input__icon--start{left:var(--df-space-3)}.df-input__icon--end{right:var(--df-space-3)}.df-input__hint{font-size:var(--df-font-size-xs);color:var(--df-color-neutral-500)}.df-input__error{font-size:var(--df-font-size-xs);color:var(--df-color-danger)}.df-nav{display:flex;flex-direction:column;background:var(--df-color-neutral-0);border-right:1px solid var(--df-color-neutral-200);font-family:var(--df-font-family);padding:var(--df-space-4) var(--df-space-3);width:240px;min-height:100%}.df-nav--collapsed{width:64px;padding:var(--df-space-4) var(--df-space-2)}.df-nav__logo{padding:0 var(--df-space-2) var(--df-space-4)}.df-nav__list,.df-nav__sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.df-nav__sub{padding-left:var(--df-space-5);margin-top:2px}.df-nav__btn{display:flex;align-items:center;gap:var(--df-space-3);width:100%;padding:var(--df-space-2) var(--df-space-3);border:none;background:none;cursor:pointer;border-radius:var(--df-radius-md);font-family:var(--df-font-family);font-size:var(--df-font-size-sm);font-weight:var(--df-font-weight-medium);color:var(--df-color-neutral-600);text-align:left;transition:background var(--df-transition-fast),color var(--df-transition-fast)}.df-nav__btn:hover{background:var(--df-color-neutral-100);color:var(--df-color-neutral-900)}.df-nav__btn--active{background:var(--df-color-brand-50);color:var(--df-color-brand-600);font-weight:var(--df-font-weight-semibold)}.df-nav__btn--sub{font-weight:var(--df-font-weight-regular);font-size:var(--df-font-size-xs)}.df-nav__icon{flex-shrink:0;font-size:16px;display:flex;align-items:center}.df-nav__label{flex:1}.df-nav__chevron{font-size:12px;transition:transform var(--df-transition-normal);color:var(--df-color-neutral-400)}.df-nav__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--df-radius-full);background:var(--df-color-brand-50);color:var(--df-color-brand-600);font-size:11px;font-weight:var(--df-font-weight-bold)}.df-notification{display:flex;align-items:flex-start;gap:var(--df-space-3);padding:var(--df-space-4) var(--df-space-4);border-radius:var(--df-radius-lg);border:1.5px solid transparent;font-family:var(--df-font-family)}.df-notification--info{background:var(--df-color-brand-50);border-color:var(--df-color-brand-200);color:var(--df-color-brand-800)}.df-notification--positive{background:var(--df-color-positive-light);border-color:#a7f3d0;color:var(--df-color-positive-dark)}.df-notification--warning{background:var(--df-color-warning-light);border-color:#fde68a;color:var(--df-color-warning-dark)}.df-notification--danger{background:var(--df-color-danger-light);border-color:#fca5a5;color:var(--df-color-danger-dark)}.df-notification__icon{flex-shrink:0;font-size:16px;font-weight:700;margin-top:1px}.df-notification__body{flex:1;display:flex;flex-direction:column;gap:2px}.df-notification__title{font-size:var(--df-font-size-sm);font-weight:var(--df-font-weight-semibold)}.df-notification__message{font-size:var(--df-font-size-sm);line-height:var(--df-line-height-normal)}.df-notification__dismiss{background:none;border:none;cursor:pointer;padding:0;font-size:14px;color:inherit;opacity:.6;align-self:flex-start}.df-notification__dismiss:hover{opacity:1}.df-pagination{display:flex;align-items:center;gap:var(--df-space-1);font-family:var(--df-font-family)}.df-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 var(--df-space-2);border:1.5px solid var(--df-color-neutral-200);border-radius:var(--df-radius-md);background:var(--df-color-neutral-0);font-size:var(--df-font-size-sm);font-family:var(--df-font-family);color:var(--df-color-neutral-700);cursor:pointer;transition:all var(--df-transition-fast)}.df-pagination__btn:hover:not(:disabled):not(.df-pagination__btn--active){background:var(--df-color-neutral-50);border-color:var(--df-color-neutral-300)}.df-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.df-pagination__btn--active{background:var(--df-color-brand-600);border-color:var(--df-color-brand-600);color:#fff;font-weight:var(--df-font-weight-semibold)}.df-pagination__dots{padding:0 var(--df-space-2);color:var(--df-color-neutral-400)}.df-tabs{display:flex;flex-direction:column;font-family:var(--df-font-family)}.df-tabs__list{display:flex;align-items:center;border-bottom:2px solid var(--df-color-neutral-200);gap:0}.df-tabs__tab{padding:var(--df-space-3) var(--df-space-4);background:none;border:none;cursor:pointer;font-family:var(--df-font-family);font-size:var(--df-font-size-sm);font-weight:var(--df-font-weight-medium);color:var(--df-color-neutral-500);white-space:nowrap;position:relative;display:flex;align-items:center;gap:var(--df-space-2);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--df-transition-fast)}.df-tabs__tab:hover:not(:disabled){color:var(--df-color-neutral-800)}.df-tabs__tab:disabled{opacity:.4;cursor:not-allowed}.df-tabs__tab--active{color:var(--df-color-brand-600);border-bottom-color:var(--df-color-brand-600);font-weight:var(--df-font-weight-semibold)}.df-tabs__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--df-radius-full);background:var(--df-color-neutral-100);color:var(--df-color-neutral-600);font-size:11px;font-weight:var(--df-font-weight-semibold)}.df-tabs__tab--active .df-tabs__count{background:var(--df-color-brand-50);color:var(--df-color-brand-600)}.df-tabs__panel{padding:var(--df-space-4) 0}.df-tag{display:inline-flex;align-items:center;gap:var(--df-space-1);padding:3px 10px;border-radius:var(--df-radius-full);font-family:var(--df-font-family);font-size:var(--df-font-size-xs);font-weight:var(--df-font-weight-medium);line-height:1.4;border:1px solid transparent}.df-tag--brand.df-tag--primary{background:var(--df-color-brand-600);color:#fff}.df-tag--brand.df-tag--secondary{background:var(--df-color-brand-50);color:var(--df-color-brand-700);border-color:var(--df-color-brand-200)}.df-tag--neutral.df-tag--primary{background:var(--df-color-neutral-700);color:#fff}.df-tag--neutral.df-tag--secondary{background:var(--df-color-neutral-100);color:var(--df-color-neutral-700);border-color:var(--df-color-neutral-300)}.df-tag--positive.df-tag--primary{background:var(--df-color-positive);color:#fff}.df-tag--positive.df-tag--secondary{background:var(--df-color-positive-light);color:var(--df-color-positive-dark);border-color:#a7f3d0}.df-tag--warning.df-tag--primary{background:var(--df-color-warning);color:#fff}.df-tag--warning.df-tag--secondary{background:var(--df-color-warning-light);color:var(--df-color-warning-dark);border-color:#fde68a}.df-tag--danger.df-tag--primary{background:var(--df-color-danger);color:#fff}.df-tag--danger.df-tag--secondary{background:var(--df-color-danger-light);color:var(--df-color-danger-dark);border-color:#fca5a5}.df-tag__remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;margin-left:2px;font-size:14px;line-height:1;color:inherit;opacity:.7}.df-tag__remove:hover{opacity:1}.df-tooltip-wrapper{position:relative;display:inline-flex}.df-tooltip{position:absolute;z-index:var(--df-z-tooltip);white-space:nowrap;background:var(--df-color-neutral-900);color:#fff;font-family:var(--df-font-family);font-size:var(--df-font-size-xs);font-weight:var(--df-font-weight-medium);padding:5px var(--df-space-3);border-radius:var(--df-radius-sm);pointer-events:none;animation:df-fade-in .1s ease}.df-tooltip--top{bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.df-tooltip--bottom{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.df-tooltip--left{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}.df-tooltip--right{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@devfactory-ui/ui",
+  "version": "0.1.0",
+  "description": "DevFactory Design System — React component library",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --outDir dist",
+    "dev": "vite build --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-interactions": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@storybook/test": "^8.4.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "eslint": "^9.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "storybook": "^8.4.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "keywords": [
+    "devfactory",
+    "design-system",
+    "react",
+    "components",
+    "ui"
+  ],
+  "license": "MIT"
+}