@thru/design-system 0.1.25 → 0.1.28
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.
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -11,10 +11,10 @@ var Button = React2.forwardRef(
|
|
|
11
11
|
({ className, variant = "primary", size = "md", children, disabled, ...props }, ref) => {
|
|
12
12
|
const baseStyles = "font-semibold transition-colors focus:outline-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed";
|
|
13
13
|
const variants = {
|
|
14
|
-
primary: "bg-surface-lower-inverse text-text-primary-inverse hover:bg-surface-higher-inverse",
|
|
15
|
-
secondary: "bg-surface-brick text-text-primary-inverse hover:opacity-90",
|
|
16
|
-
outline: "border border-border-primary text-text-primary hover:bg-surface-lower",
|
|
17
|
-
ghost: "text-text-primary hover:bg-surface-lower"
|
|
14
|
+
primary: "bg-surface-lower-inverse text-text-primary-inverse hover:bg-surface-higher-inverse focus:bg-surface-higher-inverse",
|
|
15
|
+
secondary: "bg-surface-brick text-text-primary-inverse hover:opacity-90 focus:opacity-90",
|
|
16
|
+
outline: "border border-border-primary text-text-primary hover:bg-surface-lower focus:bg-surface-lower",
|
|
17
|
+
ghost: "text-text-primary hover:bg-surface-lower focus:bg-surface-lower"
|
|
18
18
|
};
|
|
19
19
|
const sizes = {
|
|
20
20
|
sm: "px-3 py-1.5 text-sm",
|
|
@@ -46,7 +46,7 @@ var Input = React2.forwardRef(
|
|
|
46
46
|
"div",
|
|
47
47
|
{
|
|
48
48
|
className: cn(
|
|
49
|
-
"border bg-surface-higher p-4 transition-colors cursor-
|
|
49
|
+
"border bg-surface-higher p-4 transition-colors cursor-pointer flex items-center",
|
|
50
50
|
"focus-within:border-border-primary focus-within:bg-golden",
|
|
51
51
|
error ? "border-border-brand bg-surface-brick focus-within:bg-surface-brick" : "border-border-secondary",
|
|
52
52
|
"disabled:bg-surface-disabled disabled:cursor-not-allowed",
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils.ts","../src/components/Button.tsx","../src/components/Input.tsx","../src/components/Card.tsx","../src/components/Text.tsx"],"names":["React","jsx"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Utility functions for the design system\n */\n\n/**\n * Combines class names, handling undefined/null values\n */\nexport function cn(...classes: (string | undefined | null | false)[]): string {\n return classes.filter(Boolean).join(' ');\n}\n\n","import React from 'react';\nimport { cn } from '../utils';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'outline' | 'ghost';\n size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant = 'primary', size = 'md', children, disabled, ...props }, ref) => {\n const baseStyles = 'font-semibold transition-colors focus:outline-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed';\n \n const variants = {\n primary: 'bg-surface-lower-inverse text-text-primary-inverse hover:bg-surface-higher-inverse',\n secondary: 'bg-surface-brick text-text-primary-inverse hover:opacity-90',\n outline: 'border border-border-primary text-text-primary hover:bg-surface-lower',\n ghost: 'text-text-primary hover:bg-surface-lower',\n };\n\n const sizes = {\n sm: 'px-3 py-1.5 text-sm',\n md: 'px-6 py-3 text-base',\n lg: 'px-8 py-4 text-lg',\n };\n\n return (\n <button\n ref={ref}\n className={cn(baseStyles, variants[variant], sizes[size], className)}\n disabled={disabled}\n {...props}\n >\n {children}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\n","import React from 'react';\nimport { cn } from '../utils';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n error?: boolean;\n label?: string;\n wrapperClassName?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, error, label, id, wrapperClassName, ...props }, ref) => {\n const inputId = id || label?.toLowerCase().replace(/\\s+/g, '-');\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n // Merge refs - support both forwarded ref and internal ref\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n const handleWrapperClick = () => {\n inputRef.current?.focus();\n };\n\n const inputWrapper = (\n <div\n className={cn(\n 'border bg-surface-higher p-4 transition-colors cursor-text flex items-center',\n 'focus-within:border-border-primary focus-within:bg-golden',\n error\n ? 'border-border-brand bg-surface-brick focus-within:bg-surface-brick'\n : 'border-border-secondary',\n 'disabled:bg-surface-disabled disabled:cursor-not-allowed',\n wrapperClassName,\n )}\n onClick={handleWrapperClick}\n >\n <input\n ref={inputRef}\n id={inputId}\n className={cn(\n 'w-full bg-transparent outline-none font-sans text-base',\n 'text-text-primary placeholder:text-text-tertiary',\n 'placeholder:font-mono',\n 'disabled:cursor-not-allowed',\n className\n )}\n {...props}\n />\n </div>\n );\n\n if (label) {\n return (\n <div className=\"space-y-2\">\n <label\n htmlFor={inputId}\n className=\"block text-sm font-medium text-text-primary\"\n >\n {label}\n </label>\n {inputWrapper}\n </div>\n );\n }\n\n return inputWrapper;\n }\n);\n\nInput.displayName = 'Input';\n\n","import React from 'react';\nimport { cn } from '../utils';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: 'default' | 'elevated' | 'outlined';\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, variant = 'default', children, ...props }, ref) => {\n const variants = {\n default: 'bg-white border border-stone-300',\n elevated: 'bg-white shadow-lg border border-stone-300',\n outlined: 'bg-white border border-stone-800',\n };\n\n return (\n <div\n ref={ref}\n className={cn('p-6', variants[variant], className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nCard.displayName = 'Card';\n\n","import React from 'react';\nimport { cn } from '../utils';\n\ntype TextProps = {\n [x: string]: unknown;\n className?: string;\n as?: React.ElementType;\n bold?: boolean;\n children?: React.ReactNode;\n};\n\ntype TextComponent = React.FC<TextProps>;\n\nconst baseClasses = 'text-current';\n\nconst Base: React.FC<TextProps & { defaultClasses: string }> = ({\n as = 'p',\n children,\n className,\n defaultClasses,\n ...props\n}) => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { bold, ...propsWithoutBold } = props;\n\n return React.createElement(\n as,\n {\n className: cn(baseClasses, defaultClasses, className),\n ...propsWithoutBold,\n },\n children\n );\n};\n\nconst TextStyle = (className: { normal: string; bold: string }, props: TextProps) => {\n const boldClass = props.bold ? className.bold : undefined;\n return (\n <Base\n defaultClasses={cn(className.normal, boldClass)}\n {...props}\n />\n );\n};\n\nexport const Heading1: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-1', bold: 'type-heading-1-bold' }, props);\n\nexport const Heading2: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-2', bold: 'type-heading-2-bold' }, props);\n\nexport const Heading3: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-3', bold: 'type-heading-3-bold' }, props);\n\nexport const Heading4: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-4', bold: 'type-heading-4-bold' }, props);\n\nexport const Heading5: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-5', bold: 'type-heading-5-bold' }, props);\n\nexport const Body1: TextComponent = (props) =>\n TextStyle({ normal: 'type-body-1', bold: 'type-body-1-bold' }, props);\n\nexport const Body3: TextComponent = (props) =>\n TextStyle({ normal: 'type-body-3', bold: 'type-body-3-bold' }, props);\n\nexport const Body4: TextComponent = (props) =>\n TextStyle({ normal: 'type-body-4', bold: 'type-body-4-bold' }, props);\n\nexport const Body5: TextComponent = (props) =>\n TextStyle({ normal: 'type-body-5', bold: 'type-body-5-bold' }, props);\n\nexport const Ui1: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-1', bold: 'type-ui-1-bold' }, props);\n\nexport const Ui2: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-2', bold: 'type-ui-2-bold' }, props);\n\nexport const Ui3: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-3', bold: 'type-ui-3-bold' }, props);\n\nexport const Ui4: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-4', bold: 'type-ui-4-bold' }, props);\n\nexport const Ui5: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-5', bold: 'type-ui-5-bold' }, props);\n\nexport const Button1: TextComponent = (props) =>\n TextStyle({ normal: 'type-button-1', bold: 'type-button-1-bold' }, props);\n\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils.ts","../src/components/Button.tsx","../src/components/Input.tsx","../src/components/Card.tsx","../src/components/Text.tsx"],"names":["React","jsx"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Utility functions for the design system\n */\n\n/**\n * Combines class names, handling undefined/null values\n */\nexport function cn(...classes: (string | undefined | null | false)[]): string {\n return classes.filter(Boolean).join(' ');\n}\n\n","import React from 'react';\nimport { cn } from '../utils';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'outline' | 'ghost';\n size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant = 'primary', size = 'md', children, disabled, ...props }, ref) => {\n const baseStyles = 'font-semibold transition-colors focus:outline-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed';\n \n const variants = {\n primary: 'bg-surface-lower-inverse text-text-primary-inverse hover:bg-surface-higher-inverse focus:bg-surface-higher-inverse',\n secondary: 'bg-surface-brick text-text-primary-inverse hover:opacity-90 focus:opacity-90',\n outline: 'border border-border-primary text-text-primary hover:bg-surface-lower focus:bg-surface-lower',\n ghost: 'text-text-primary hover:bg-surface-lower focus:bg-surface-lower',\n };\n\n const sizes = {\n sm: 'px-3 py-1.5 text-sm',\n md: 'px-6 py-3 text-base',\n lg: 'px-8 py-4 text-lg',\n };\n\n return (\n <button\n ref={ref}\n className={cn(baseStyles, variants[variant], sizes[size], className)}\n disabled={disabled}\n {...props}\n >\n {children}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\n","import React from 'react';\nimport { cn } from '../utils';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n error?: boolean;\n label?: string;\n wrapperClassName?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, error, label, id, wrapperClassName, ...props }, ref) => {\n const inputId = id || label?.toLowerCase().replace(/\\s+/g, '-');\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n // Merge refs - support both forwarded ref and internal ref\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n const handleWrapperClick = () => {\n inputRef.current?.focus();\n };\n\n const inputWrapper = (\n <div\n className={cn(\n 'border bg-surface-higher p-4 transition-colors cursor-pointer flex items-center',\n 'focus-within:border-border-primary focus-within:bg-golden',\n error\n ? 'border-border-brand bg-surface-brick focus-within:bg-surface-brick'\n : 'border-border-secondary',\n 'disabled:bg-surface-disabled disabled:cursor-not-allowed',\n wrapperClassName,\n )}\n onClick={handleWrapperClick}\n >\n <input\n ref={inputRef}\n id={inputId}\n className={cn(\n 'w-full bg-transparent outline-none font-sans text-base',\n 'text-text-primary placeholder:text-text-tertiary',\n 'placeholder:font-mono',\n 'disabled:cursor-not-allowed',\n className\n )}\n {...props}\n />\n </div>\n );\n\n if (label) {\n return (\n <div className=\"space-y-2\">\n <label\n htmlFor={inputId}\n className=\"block text-sm font-medium text-text-primary\"\n >\n {label}\n </label>\n {inputWrapper}\n </div>\n );\n }\n\n return inputWrapper;\n }\n);\n\nInput.displayName = 'Input';\n\n","import React from 'react';\nimport { cn } from '../utils';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: 'default' | 'elevated' | 'outlined';\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, variant = 'default', children, ...props }, ref) => {\n const variants = {\n default: 'bg-white border border-stone-300',\n elevated: 'bg-white shadow-lg border border-stone-300',\n outlined: 'bg-white border border-stone-800',\n };\n\n return (\n <div\n ref={ref}\n className={cn('p-6', variants[variant], className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nCard.displayName = 'Card';\n\n","import React from 'react';\nimport { cn } from '../utils';\n\ntype TextProps = {\n [x: string]: unknown;\n className?: string;\n as?: React.ElementType;\n bold?: boolean;\n children?: React.ReactNode;\n};\n\ntype TextComponent = React.FC<TextProps>;\n\nconst baseClasses = 'text-current';\n\nconst Base: React.FC<TextProps & { defaultClasses: string }> = ({\n as = 'p',\n children,\n className,\n defaultClasses,\n ...props\n}) => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { bold, ...propsWithoutBold } = props;\n\n return React.createElement(\n as,\n {\n className: cn(baseClasses, defaultClasses, className),\n ...propsWithoutBold,\n },\n children\n );\n};\n\nconst TextStyle = (className: { normal: string; bold: string }, props: TextProps) => {\n const boldClass = props.bold ? className.bold : undefined;\n return (\n <Base\n defaultClasses={cn(className.normal, boldClass)}\n {...props}\n />\n );\n};\n\nexport const Heading1: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-1', bold: 'type-heading-1-bold' }, props);\n\nexport const Heading2: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-2', bold: 'type-heading-2-bold' }, props);\n\nexport const Heading3: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-3', bold: 'type-heading-3-bold' }, props);\n\nexport const Heading4: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-4', bold: 'type-heading-4-bold' }, props);\n\nexport const Heading5: TextComponent = (props) =>\n TextStyle({ normal: 'type-heading-5', bold: 'type-heading-5-bold' }, props);\n\nexport const Body1: TextComponent = (props) =>\n TextStyle({ normal: 'type-body-1', bold: 'type-body-1-bold' }, props);\n\nexport const Body3: TextComponent = (props) =>\n TextStyle({ normal: 'type-body-3', bold: 'type-body-3-bold' }, props);\n\nexport const Body4: TextComponent = (props) =>\n TextStyle({ normal: 'type-body-4', bold: 'type-body-4-bold' }, props);\n\nexport const Body5: TextComponent = (props) =>\n TextStyle({ normal: 'type-body-5', bold: 'type-body-5-bold' }, props);\n\nexport const Ui1: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-1', bold: 'type-ui-1-bold' }, props);\n\nexport const Ui2: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-2', bold: 'type-ui-2-bold' }, props);\n\nexport const Ui3: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-3', bold: 'type-ui-3-bold' }, props);\n\nexport const Ui4: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-4', bold: 'type-ui-4-bold' }, props);\n\nexport const Ui5: TextComponent = (props) =>\n TextStyle({ normal: 'type-ui-5', bold: 'type-ui-5-bold' }, props);\n\nexport const Button1: TextComponent = (props) =>\n TextStyle({ normal: 'type-button-1', bold: 'type-button-1-bold' }, props);\n\n"]}
|