npm - @goliapkg/gds - Versions diffs - 0.9.6 → 0.9.7 - Mend

@goliapkg/gds 0.9.6 → 0.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/stepper-DhpGORX8.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"stepper-DhpGORX8.js","names":[],"sources":["../src/l4-molecules/accordion.tsx","../src/l4-molecules/progress-steps.tsx","../src/l4-molecules/stepper.tsx"],"sourcesContent":["// accordion — expandable sections with single/multiple mode\nimport type { ReactNode } from 'react'\nimport { createContext, useContext, useState } from 'react'\n\nimport { focusCls } from '../utils/a11y'\nimport { cx } from '../utils/cx'\n\ntype AccordionType = 'multiple' | 'single'\n\ntype AccordionContextValue = {\n expanded: string[]\n toggle: (id: string) => void\n}\n\nconst AccordionContext = createContext<AccordionContextValue>({\n expanded: [],\n toggle: () => {},\n})\n\nexport type AccordionProps = {\n children: ReactNode\n type?: AccordionType\n defaultExpanded?: string[]\n className?: string\n}\n\nexport function Accordion({ children, type = 'single', defaultExpanded = [], className }: AccordionProps) {\n const [expanded, setExpanded] = useState<string[]>(defaultExpanded)\n\n const toggle = (id: string) => {\n setExpanded((prev) => {\n const isOpen = prev.includes(id)\n if (isOpen) return prev.filter((x) => x !== id)\n if (type === 'single') return [id]\n return [...prev, id]\n })\n }\n\n return (\n <div className={cx('divide-y divide-border', className)} data-component=\"accordion\">\n <AccordionContext.Provider value={{ expanded, toggle }}>\n {children}\n </AccordionContext.Provider>\n </div>\n )\n}\n\nexport type AccordionItemProps = {\n id: string\n title: string\n children: ReactNode\n disabled?: boolean\n className?: string\n}\n\nexport function AccordionItem({ id, title, children, disabled, className }: AccordionItemProps) {\n const { expanded, toggle } = useContext(AccordionContext)\n const isOpen = expanded.includes(id)\n\n return (\n <div className={cx(className)} data-state={isOpen ? 'open' : 'closed'}>\n <button\n type=\"button\"\n disabled={disabled}\n onClick={() => toggle(id)}\n className={cx(\n 'flex w-full items-center justify-between gds-pad-y-lg text-left text-sm font-medium text-fg transition-colors',\n focusCls,\n disabled === true && 'pointer-events-none opacity-40',\n )}\n aria-expanded={isOpen}\n >\n <span>{title}</span>\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n className={cx('shrink-0 transition-transform duration-200', isOpen && 'rotate-180')}\n >\n <path d=\"M3.5 5.5l3.5 3 3.5-3\" />\n </svg>\n </button>\n {isOpen && (\n <div className=\"pb-3 gds-text-body text-fg-muted\">{children}</div>\n )}\n </div>\n )\n}\n","// progress-steps — linear progress indicator with labeled steps\nimport { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\n\ntype ProgressStepsProps = {\n className?: string\n current: number\n steps: string[]\n}\n\nexport const ProgressSteps = forwardRef<HTMLDivElement, ProgressStepsProps>(\n function ProgressSteps({ className, current, steps }, ref) {\n return (\n <div\n ref={ref}\n className={cx('flex items-center', className)}\n data-component=\"progress-steps\"\n role=\"list\"\n >\n {steps.map((label, i) => {\n const isCompleted = i < current\n const isCurrent = i === current\n\n return (\n <div key={i} className=\"flex flex-1 items-center\" role=\"listitem\">\n <div className=\"flex flex-col items-center gap-1\">\n <div\n className={cx(\n 'flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium',\n isCompleted && 'bg-accent text-accent-fg',\n isCurrent && 'border-2 border-accent bg-accent/10 text-accent',\n !isCompleted && !isCurrent && 'border border-border bg-bg-secondary text-fg-muted',\n )}\n >\n {isCompleted ? (\n <svg className=\"h-3.5 w-3.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3}>\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n ) : (\n i + 1\n )}\n </div>\n <span className={cx(\n 'text-center gds-text-caption',\n isCurrent ? 'font-medium text-fg' : 'text-fg-muted',\n )}>\n {label}\n </span>\n </div>\n {i < steps.length - 1 && (\n <div className={cx(\n 'mx-2 h-px flex-1',\n isCompleted ? 'bg-accent' : 'bg-border',\n )} />\n )}\n </div>\n )\n })}\n </div>\n )\n },\n)\n\nexport type { ProgressStepsProps }\n","// stepper — multi-step progress indicator with connecting lines\nimport { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\n\nexport type StepDef = {\n label: string\n description?: string\n}\n\nexport type StepperProps = React.HTMLAttributes<HTMLDivElement> & {\n steps: StepDef[]\n current: number\n orientation?: 'horizontal' | 'vertical'\n}\n\nconst checkSvg = (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d=\"M3 7.5l3 3 5-6\" />\n </svg>\n)\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(\n function Stepper({ steps, current, orientation = 'horizontal', className, ...props }, ref) {\n const isHoriz = orientation === 'horizontal'\n\n return (\n <div\n ref={ref}\n className={cx(\n 'flex',\n isHoriz ? 'items-start' : 'flex-col',\n className,\n )}\n data-component=\"stepper\"\n role=\"list\"\n {...props}\n >\n {steps.map((step, i) => {\n const completed = i < current\n const active = i === current\n\n return (\n <div\n key={i}\n className={cx(\n 'flex',\n isHoriz ? 'flex-1 items-center' : 'items-start',\n )}\n role=\"listitem\"\n >\n <div className={cx('flex', isHoriz ? 'flex-col items-center' : 'items-start gds-gap')}>\n <div className=\"flex items-center\">\n {/* step circle */}\n <div\n className={cx(\n 'flex gds-sq-sm shrink-0 items-center justify-center gds-radius-badge gds-text-body font-medium transition-colors',\n completed && 'bg-accent text-accent-fg',\n active && 'border-2 border-accent bg-transparent text-accent ring-2 ring-accent/20',\n !completed && !active && 'bg-bg-tertiary text-fg-muted',\n )}\n >\n {completed ? checkSvg : i + 1}\n </div>\n </div>\n {/* label + description */}\n <div className={cx(isHoriz ? 'mt-2 text-center' : '')}>\n <p className={cx('gds-text-body font-medium', active ? 'text-fg' : 'text-fg-muted')}>{step.label}</p>\n {step.description !== undefined && (\n <p className=\"mt-0.5 gds-text-caption text-fg-muted\">{step.description}</p>\n )}\n </div>\n </div>\n\n {/* connecting line */}\n {i < steps.length - 1 && (\n isHoriz ? (\n <div className={cx(\n 'mx-2 mt-3.5 h-px flex-1',\n completed ? 'bg-accent' : 'bg-border',\n )} />\n ) : (\n <div className={cx(\n 'ml-3.5 mt-1 mb-1 w-px',\n 'min-h-6',\n completed ? 'bg-accent' : 'bg-border',\n )} />\n )\n )}\n </div>\n )\n })}\n </div>\n )\n },\n)\n"],"mappings":"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"}