@tempoxyz/ds 0.0.5 → 0.0.7

package/src/platform/components/TextInput.tsx

@@ -5,7 +5,16 @@ import { style, variants } from '../zyzz.config.js'
 
 export function TextInput(props: TextInput.Props) {
   const generatedId = useId()
-  const { appearance, className, helper, id = generatedId, label, secondaryLabel, vars } = props
+  const {
+    appearance,
+    className,
+    helper,
+    id = generatedId,
+    label,
+    secondaryLabel,
+    stretch,
+    vars,
+  } = props
   const descriptionId = `${id}-description`
   const appearanceProps = styles.input({ appearance, className, style: props.style, vars })
 
@@ -18,6 +27,7 @@ export function TextInput(props: TextInput.Props) {
         helper,
         label: _label,
         secondaryLabel: _secondaryLabel,
+        stretch: _stretch,
         vars: _vars,
         ...attributes
       } = props
@@ -44,6 +54,7 @@ export function TextInput(props: TextInput.Props) {
       helper,
       label: _label,
       secondaryLabel: _secondaryLabel,
+      stretch: _stretch,
       vars: _vars,
       ...attributes
     } = props
@@ -63,7 +74,7 @@ export function TextInput(props: TextInput.Props) {
   })()
 
   return (
-    <div {...styles.textInput()}>
+    <div {...styles.textInput({ stretch })}>
       {label && (
         <div {...styles.labels()}>
           <label htmlFor={id} {...styles.label()}>
@@ -156,8 +167,20 @@ namespace styles {
     { id: 'tds/platform/text-input/secondary-label' },
   )
 
-  export const textInput = style(
-    { display: 'flex', flexDirection: 'column', maxWidth: '100% !custom', width: '320px !custom' },
+  export const textInput = variants(
+    {
+      base: {
+        display: 'flex',
+        flexDirection: 'column',
+        maxWidth: '100% !custom',
+        width: '320px !custom',
+      },
+      defaultVariants: { stretch: false },
+      variants: {
+        // Figma defines only the 320px width. Stretched inputs fill their container.
+        stretch: { false: {}, true: { width: '100% !custom' } },
+      },
+    },
     { id: 'tds/platform/text-input' },
   )
 }

package/src/platform/index.ts

@@ -4,6 +4,7 @@ export { Badge } from './components/Badge.js'
 export { Button } from './components/Button.js'
 export { ButtonGroup } from './components/ButtonGroup.js'
 export { Callout } from './components/Callout.js'
+export { Card } from './components/Card.js'
 export { Checkbox } from './components/Checkbox.js'
 export { DenseTable } from './components/DenseTable.js'
 export { IconBadge } from './components/IconBadge.js'