@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

package/dist/modules/design_system/gallery/entries/inputs-snippets.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/entries/inputs-snippets.ts"],
+  "sourcesContent": ["// Copy-paste snippets for the Inputs family. The previews render full source matrices from\n// ../demos; the snippet shows the smallest self-contained usage a developer can paste into a\n// module: real imports, literal sample text, no gallery helpers, assets or translation keys.\n\nconst SPECIALISED_INPUTS_NOTE = `// Email, phone, card, website, amount, search and password have dedicated primitives:\n// EmailInput, PhoneNumberField, CardInput, WebsiteInput, AmountInput, SearchInput, PasswordInput.`\n\nexport function inputFieldCode({ inputProps = '', fieldProps = '' }: { inputProps?: string; fieldProps?: string } = {}): string {\n  return `import { User } from 'lucide-react'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\n\n<FormField label=\"Full name\" description=\"Shown on invoices\"${fieldProps}>\n  <Input${inputProps} leftIcon={<User />} placeholder=\"Alex Morgan\" />\n</FormField>\n\n${SPECIALISED_INPUTS_NOTE}`\n}\n\nexport const textareaFieldCode = `import { Textarea } from '@open-mercato/ui/primitives/textarea'\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\n\n<FormField label=\"Note\" description=\"Visible to your team\">\n  <Textarea appearance=\"source\" showCount maxLength={200} placeholder=\"Add a note\" />\n</FormField>\n\n// States: pass error=\"...\" or disabled to FormField, and disabled to Textarea.`\n\nexport function phoneNumberFieldCode(extraProps = ''): string {\n  return `import * as React from 'react'\nimport { PhoneNumberField, type PhoneCountry } from '@open-mercato/ui/backend/inputs/PhoneNumberField'\n\nconst countries: PhoneCountry[] = [\n  { iso2: 'US', dialCode: '+1', label: 'United States', flag: '\uD83C\uDDFA\uD83C\uDDF8' },\n  { iso2: 'PL', dialCode: '+48', label: 'Poland', flag: '\uD83C\uDDF5\uD83C\uDDF1' },\n]\n\nfunction PhoneExample() {\n  const [phone, setPhone] = React.useState<string | undefined>()\n  return (\n    <PhoneNumberField size={36} ariaLabel=\"Phone number\" countryLabel=\"Country\"\n      value={phone} onValueChange={setPhone} countries={countries}${extraProps} />\n  )\n}`\n}\n\nexport function selectFieldCode({ size = 36, leading = false, selectProps = '', fieldProps = '', initialValue = 'warsaw' }: {\n  size?: 32 | 36 | 40\n  leading?: boolean\n  selectProps?: string\n  fieldProps?: string\n  initialValue?: string\n} = {}): string {\n  const leadingImport = leading ? `import { Building2 } from 'lucide-react'\\n` : ''\n  const triggerImports = leading ? 'Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue' : 'Select, SelectContent, SelectItem, SelectTrigger, SelectValue'\n  const triggerLeading = leading ? `\\n          <SelectTriggerLeading><Building2 aria-hidden=\"true\" className=\"size-5\" /></SelectTriggerLeading>` : ''\n  const itemLeading = leading ? ` leading={<Building2 aria-hidden=\"true\" className=\"size-5\" />}` : ''\n  return `import * as React from 'react'\n${leadingImport}import { FormField } from '@open-mercato/ui/primitives/form-field'\nimport { ${triggerImports} } from '@open-mercato/ui/primitives/select'\n\nfunction SelectExample() {\n  const [value, setValue] = React.useState('${initialValue}')\n  return (\n    <Select value={value} onValueChange={setValue}${selectProps}>\n      <FormField label=\"Office\" description=\"You can change it later\"${fieldProps}>\n        <SelectTrigger size={${size}}>${triggerLeading}\n          <SelectValue placeholder=\"Choose an office\" />\n        </SelectTrigger>\n      </FormField>\n      <SelectContent>\n        <SelectItem value=\"warsaw\"${itemLeading}>Warsaw</SelectItem>\n        <SelectItem value=\"berlin\"${itemLeading}>Berlin</SelectItem>\n        <SelectItem value=\"archive\" disabled${itemLeading}>Archive</SelectItem>\n      </SelectContent>\n    </Select>\n  )\n}`\n}\n\nexport function dropdownCode({ size = 36, initialQuery = '' }: { size?: 36 | 56; initialQuery?: string } = {}): string {\n  const description = size === 56 ? ` description=\"12 members\"` : ''\n  return `import * as React from 'react'\nimport { Building2, Plus } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter } from '@open-mercato/ui/primitives/dropdown'\n\nconst workspaces = ['Warsaw', 'Berlin', 'Lisbon']\n\nfunction DropdownExample() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState('Warsaw')\n  const [query, setQuery] = React.useState('${initialQuery}')\n  return (\n    <Dropdown open={open} onOpenChange={setOpen}>\n      <DropdownTrigger asChild><Button variant=\"outline\">{value}</Button></DropdownTrigger>\n      <DropdownContent className=\"w-96 max-w-full\" aria-label=\"Choose a workspace\" commandProps={{ label: 'Workspaces' }}>\n        <DropdownInput value={query} onValueChange={setQuery} aria-label=\"Search workspaces\" placeholder=\"Search workspaces\" />\n        <DropdownList>\n          <DropdownEmpty>No workspaces match your search</DropdownEmpty>\n          {workspaces.map((workspace) => (\n            <DropdownItem key={workspace} value={workspace} size={${size}} checked={value === workspace}${description}\n              leading={<Building2 aria-hidden=\"true\" className=\"size-5\" />}\n              onSelect={() => { setValue(workspace); setOpen(false) }}>\n              {workspace}\n            </DropdownItem>\n          ))}\n        </DropdownList>\n        <DropdownFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\"><Plus className=\"size-5\" />Add workspace</Button>\n        </DropdownFooter>\n      </DropdownContent>\n    </Dropdown>\n  )\n}`\n}\n\nexport function fieldLabelCode(labelProps = '', imports = ''): string {\n  return `import { FieldLabel } from '@open-mercato/ui/primitives/label'\nimport { Input } from '@open-mercato/ui/primitives/input'\n${imports}\n<FieldLabel htmlFor=\"company-name\"${labelProps}>Company name</FieldLabel>\n<Input id=\"company-name\" />`\n}\n\nexport const fieldLabelInformationCode = fieldLabelCode(\n  `\\n  information={<SimpleTooltip content=\"Used on invoices and quotes\"><CompactButton size={20} appearance=\"ghost\" aria-label=\"More information\"><KeyIconGlyph name=\"labelInformation\" /></CompactButton></SimpleTooltip>}`,\n  `import { CompactButton } from '@open-mercato/ui/primitives/compact-button'\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\nimport { KeyIconGlyph } from '@open-mercato/ui/primitives/key-icon'\n`,\n)\n\nexport const fieldLabelActionCode = fieldLabelCode(\n  `\\n  action={<LinkButton type=\"button\" size=\"sm\" variant=\"gray\" onClick={openHelp}>Help</LinkButton>}`,\n  `import { LinkButton } from '@open-mercato/ui/primitives/link-button'\n`,\n)\n\nexport const formFieldLabelCode = `import { FieldLabel } from '@open-mercato/ui/primitives/label'\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\nimport { Input } from '@open-mercato/ui/primitives/input'\n\n// FormField renders FieldLabel for you: sourceLabel switches to the source layout.\n<FormField sourceLabel label=\"Company name\" labelSublabel=\"(optional)\" description=\"Used on invoices and quotes\">\n  <Input />\n</FormField>`\n\nexport function hintTextCode({ state, icon = true }: { state?: 'error' | 'disabled'; icon?: boolean } = {}): string {\n  const stateProp = state ? ` state=\"${state}\"` : ''\n  const iconImport = icon ? `import { KeyIconGlyph } from '@open-mercato/ui/primitives/key-icon'\\n` : ''\n  const leading = icon ? ` leading={<KeyIconGlyph name=\"information\" />}` : ''\n  return `import { HintText } from '@open-mercato/ui/primitives/hint-text'\n${iconImport}\n<HintText${stateProp}${leading}>Used on invoices and quotes</HintText>`\n}\n"],
+  "mappings": "AAIA,MAAM,0BAA0B;AAAA;AAGzB,SAAS,eAAe,EAAE,aAAa,IAAI,aAAa,GAAG,IAAkD,CAAC,GAAW;AAC9H,SAAO;AAAA;AAAA;AAAA;AAAA,8DAIqD,UAAU;AAAA,UAC9D,UAAU;AAAA;AAAA;AAAA,EAGlB,uBAAuB;AACzB;AAEO,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1B,SAAS,qBAAqB,aAAa,IAAY;AAC5D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oEAY2D,UAAU;AAAA;AAAA;AAG9E;AAEO,SAAS,gBAAgB,EAAE,OAAO,IAAI,UAAU,OAAO,cAAc,IAAI,aAAa,IAAI,eAAe,SAAS,IAMrH,CAAC,GAAW;AACd,QAAM,gBAAgB,UAAU;AAAA,IAA+C;AAC/E,QAAM,iBAAiB,UAAU,wFAAwF;AACzH,QAAM,iBAAiB,UAAU;AAAA,8GAAiH;AAClJ,QAAM,cAAc,UAAU,mEAAmE;AACjG,SAAO;AAAA,EACP,aAAa;AAAA,WACJ,cAAc;AAAA;AAAA;AAAA,8CAGqB,YAAY;AAAA;AAAA,oDAEN,WAAW;AAAA,uEACQ,UAAU;AAAA,+BAClD,IAAI,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,oCAKlB,WAAW;AAAA,oCACX,WAAW;AAAA,8CACD,WAAW;AAAA;AAAA;AAAA;AAAA;AAKzD;AAEO,SAAS,aAAa,EAAE,OAAO,IAAI,eAAe,GAAG,IAA+C,CAAC,GAAW;AACrH,QAAM,cAAc,SAAS,KAAK,8BAA8B;AAChE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8CAUqC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oEASU,IAAI,kCAAkC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcrH;AAEO,SAAS,eAAe,aAAa,IAAI,UAAU,IAAY;AACpE,SAAO;AAAA;AAAA,EAEP,OAAO;AAAA,oCAC2B,UAAU;AAAA;AAE9C;AAEO,MAAM,4BAA4B;AAAA,EACvC;AAAA;AAAA,EACA;AAAA;AAAA;AAAA;AAIF;AAEO,MAAM,uBAAuB;AAAA,EAClC;AAAA;AAAA,EACA;AAAA;AAEF;AAEO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,SAAS,aAAa,EAAE,OAAO,OAAO,KAAK,IAAsD,CAAC,GAAW;AAClH,QAAM,YAAY,QAAQ,WAAW,KAAK,MAAM;AAChD,QAAM,aAAa,OAAO;AAAA,IAA0E;AACpG,QAAM,UAAU,OAAO,mDAAmD;AAC1E,SAAO;AAAA,EACP,UAAU;AAAA,WACD,SAAS,GAAG,OAAO;AAC9B;",
+  "names": []
+}