@oneplatformdev/ui 0.1.99-beta.6 → 0.1.99-beta.8

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.
@@ -56,7 +56,7 @@ import * as React from "react";
56
56
  * - Designed for texted usage. If you need icon-only, use `ButtonIcon`.
57
57
  * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.
58
58
  *
59
- * @see {@link Button} for regular text buttons
59
+ * @see {@link ButtonIcon} for icon-only buttons
60
60
  */
61
61
  export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
62
62
  export default Button;
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { ButtonCVAProps, buttonVariants } from './buttonVariants';\nimport { ButtonAdornmentProps, type ButtonProps } from './Button.types';\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\nimport { createElement, isValidElement } from \"react\";\n\nconst normalizedVariantProperties = (props: ButtonCVAProps): ButtonCVAProps => {\n const { variant, size, color } = props;\n const vls = { color, variant, size }\n if (variant === 'default') {\n console.warn('Button variant \"default\" is deprecated. Please use \"variant=contained color=primary\" instead.')\n vls.variant = 'contained'\n vls.color = 'primary'\n return vls\n }\n if ((size as string) === 'icon') {\n console.warn('Button size \"icon\" is deprecated. Please use \"<ButtonIcon/>\" component instead.')\n vls.variant = 'contained'\n vls.color = 'secondary'\n return vls\n // throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n }\n if ((variant as string) === 'transparent') {\n console.warn('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n }\n if (variant === 'outline') {\n console.warn('Button variant \"outline\" is deprecated. Please use \"variant=outlined color=primary\" instead.')\n vls.variant = 'outlined'\n vls.color = 'primary'\n return vls\n }\n if (variant === 'secondary') {\n console.warn('Button variant \"secondary\" is deprecated. Please use \"variant=contained color=secondary\" instead.')\n vls.variant = 'contained'\n vls.color = 'secondary'\n return vls\n }\n if (variant === 'destructive') {\n console.warn('Button variant \"destructive\" is deprecated. Please use \"variant=contained color=error\" instead.')\n vls.variant = 'contained'\n vls.color = 'error'\n return vls\n }\n return vls;\n}\n\nconst renderAdornment = (Adornment?: ButtonAdornmentProps) => {\n if (!Adornment) return null;\n if (isValidElement(Adornment)) return Adornment;\n return createElement(Adornment);\n};\n\n/**\n * Universal Button component used for triggering actions and UI interactions.\n * Supports variants, sizes, colors, start/end icon adornments, custom slot content,\n * tooltip integration, loading state, and polymorphic rendering via `asChild`.\n *\n * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { Button } from '@oneplatformdev/ui/Button';\n * ```\n * > Basic usage:\n * ```tsx\n * <Button>Click me</Button>\n * ```\n * > Variant and size:\n * ```tsx\n * <Button variant=\"outline\" size=\"lg\">Large Button</Button>\n * ```\n * > With icons:\n * ```tsx\n * <Button startAdornment={<PlusIcon />}>Create</Button>\n * <Button endAdornment={<ArrowRightIcon />}>Next</Button>\n * ```\n * > Icon style button:\n * ```tsx\n * <Button size=\"icon\">\n * <PlusIcon />\n * </Button>\n * ```\n * > Polymorphic rendering (`asChild`):\n * ```tsx\n * <Button asChild>\n * <a href=\"/dashboard\">Go to Dashboard</a>\n * </Button>\n * ```\n * > Tooltip via `message` or native `title`:\n * ```tsx\n * <Button title=\"Tooltip text\">Hover me</Button>\n * <Button message=\"Tooltip content\">Hover me</Button>\n * ```\n * > Loading state:\n * ```tsx\n * <Button loading>Processing...</Button>\n * ```\n * > Disabled:\n * ```tsx\n * <Button disabled>Disabled</Button>\n * ```\n *\n * @remarks\n * - Designed for texted usage. If you need icon-only, use `ButtonIcon`.\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\n *\n * @see {@link Button} for regular text buttons\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (props, ref) => {\n const {\n disabled,\n className,\n variant,\n color,\n size,\n asChild = false,\n title = '',\n tooltip,\n tooltipProps = {},\n message,\n loading = false,\n children,\n startAdornment,\n endAdornment,\n screenReader,\n ...rest\n } = props;\n const Comp = asChild ? Slot : \"button\"\n const msg = message || tooltip || title;\n\n const content = asChild\n ? children\n : (\n <>\n {!!startAdornment && (\n <LoadedIcon loading={loading} size={size}>\n {renderAdornment(startAdornment)}\n </LoadedIcon>\n )}\n\n {children}\n\n {!!endAdornment && (\n <LoadedIcon loading={loading} size={size}>\n {renderAdornment(endAdornment)}\n </LoadedIcon>\n )}\n </>\n )\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n buttonVariants({\n ...normalizedVariantProperties({ variant, size, color }),\n className\n }),\n loading && 'pointer-events-none opacity-80 user-select-none',\n )}\n {...rest}\n >\n {content}\n {!!screenReader && <span className=\"sr-only\">\n {typeof screenReader === 'string' ? screenReader : screenReader.text}\n </span>}\n </Comp>\n )\n\n if (!msg) return cmp\n return (\n <Tooltip\n {...(tooltipProps || {})}\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n message={msg}\n >\n {cmp}\n </Tooltip>\n )\n }\n)\nButton.displayName = \"Button\"\nexport default Button;\n"],"names":["normalizedVariantProperties","props","variant","size","color","vls","renderAdornment","Adornment","isValidElement","createElement","Button","React","ref","disabled","className","asChild","title","tooltip","tooltipProps","message","loading","children","startAdornment","endAdornment","screenReader","rest","Comp","Slot","msg","content","jsxs","Fragment","jsx","LoadedIcon","cmp","cn","buttonVariants","Tooltip"],"mappings":";;;;;;;;;AAWA,MAAMA,IAA8B,CAACC,MAA0C;AAC7E,QAAM,EAAE,SAAAC,GAAS,MAAAC,GAAM,OAAAC,EAAA,IAAUH,GAC3BI,IAAM,EAAE,OAAAD,GAAO,SAAAF,GAAS,MAAAC,EAAA;AAC9B,MAAID,MAAY;AACd,mBAAQ,KAAK,+FAA+F,GAC5GG,EAAI,UAAU,aACdA,EAAI,QAAQ,WACLA;AAET,MAAKF,MAAoB;AACvB,mBAAQ,KAAK,iFAAiF,GAC9FE,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA;AAGT,MAAKH,MAAuB;AAC1B,kBAAQ,KAAK,6EAA6E,GACpF,IAAI,MAAM,6EAA6E;AAE/F,SAAIA,MAAY,aACd,QAAQ,KAAK,8FAA8F,GAC3GG,EAAI,UAAU,YACdA,EAAI,QAAQ,WACLA,KAELH,MAAY,eACd,QAAQ,KAAK,mGAAmG,GAChHG,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA,MAELH,MAAY,kBACd,QAAQ,KAAK,iGAAiG,GAC9GG,EAAI,UAAU,aACdA,EAAI,QAAQ,UACLA;AAGX,GAEMC,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAS,IAAUA,IAC/BE,EAAcF,CAAS,IAFP,MA+DZG,IAASC,EAAM;AAAA,EAC1B,CAACV,GAAOW,MAAQ;AACd,UAAM;AAAA,MACJ,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,SAAAZ;AAAA,MACA,OAAAE;AAAA,MACA,MAAAD;AAAA,MACA,SAAAY,IAAU;AAAA,MACV,OAAAC,IAAQ;AAAA,MACR,SAAAC;AAAA,MACA,cAAAC,IAAe,CAAA;AAAA,MACf,SAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDxB,GACEyB,IAAOX,IAAUY,IAAO,UACxBC,IAAMT,KAAWF,KAAWD,GAE5Ba,IAAUd,IACZM,IAEA,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,MAAA,CAAC,CAACT,KACD,gBAAAU,EAACC,GAAA,EAAW,SAAAb,GAAkB,MAAAjB,GAC3B,UAAAG,EAAgBgB,CAAc,GACjC;AAAA,MAGDD;AAAA,MAEA,CAAC,CAACE,KACD,gBAAAS,EAACC,KAAW,SAAAb,GAAkB,MAAAjB,GAC3B,UAAAG,EAAgBiB,CAAY,EAAA,CAC/B;AAAA,IAAA,GAEJ,GAGEW,IACJ,gBAAAJ;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAd;AAAA,QACA,UAAAC;AAAA,QACA,WAAWsB;AAAA,UACTC,EAAe;AAAA,YACb,GAAGpC,EAA4B,EAAE,SAAAE,GAAS,MAAAC,GAAM,OAAAC,GAAO;AAAA,YACvD,WAAAU;AAAA,UAAA,CACD;AAAA,UACDM,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAI;AAAA,UACA,CAAC,CAACL,KAAgB,gBAAAQ,EAAC,QAAA,EAAK,WAAU,WAChC,UAAA,OAAOR,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAClE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAKI,IAEH,gBAAAI;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAInB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASL,KAAYO,KAAW,CAACQ,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAM;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAxB,EAAO,cAAc;"}
1
+ {"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { ButtonCVAProps, buttonVariants } from './buttonVariants';\nimport { ButtonAdornmentProps, type ButtonProps } from './Button.types';\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\nimport { createElement, isValidElement } from \"react\";\n\nconst normalizedVariantProperties = (props: ButtonCVAProps): ButtonCVAProps => {\n const { variant, size, color } = props;\n const vls = { color, variant, size }\n if (variant === 'default') {\n console.warn('Button variant \"default\" is deprecated. Please use \"variant=contained color=primary\" instead.')\n vls.variant = 'contained'\n vls.color = 'primary'\n return vls\n }\n if ((size as string) === 'icon') {\n console.warn('Button size \"icon\" is deprecated. Please use \"<ButtonIcon/>\" component instead.')\n vls.variant = 'contained'\n vls.color = 'secondary'\n return vls\n // throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n }\n if ((variant as string) === 'transparent') {\n console.warn('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n }\n if (variant === 'outline') {\n console.warn('Button variant \"outline\" is deprecated. Please use \"variant=outlined color=primary\" instead.')\n vls.variant = 'outlined'\n vls.color = 'primary'\n return vls\n }\n if (variant === 'secondary') {\n console.warn('Button variant \"secondary\" is deprecated. Please use \"variant=contained color=secondary\" instead.')\n vls.variant = 'contained'\n vls.color = 'secondary'\n return vls\n }\n if (variant === 'destructive') {\n console.warn('Button variant \"destructive\" is deprecated. Please use \"variant=contained color=error\" instead.')\n vls.variant = 'contained'\n vls.color = 'error'\n return vls\n }\n return vls;\n}\n\nconst renderAdornment = (Adornment?: ButtonAdornmentProps) => {\n if (!Adornment) return null;\n if (isValidElement(Adornment)) return Adornment;\n return createElement(Adornment);\n};\n\n/**\n * Universal Button component used for triggering actions and UI interactions.\n * Supports variants, sizes, colors, start/end icon adornments, custom slot content,\n * tooltip integration, loading state, and polymorphic rendering via `asChild`.\n *\n * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { Button } from '@oneplatformdev/ui/Button';\n * ```\n * > Basic usage:\n * ```tsx\n * <Button>Click me</Button>\n * ```\n * > Variant and size:\n * ```tsx\n * <Button variant=\"outline\" size=\"lg\">Large Button</Button>\n * ```\n * > With icons:\n * ```tsx\n * <Button startAdornment={<PlusIcon />}>Create</Button>\n * <Button endAdornment={<ArrowRightIcon />}>Next</Button>\n * ```\n * > Icon style button:\n * ```tsx\n * <Button size=\"icon\">\n * <PlusIcon />\n * </Button>\n * ```\n * > Polymorphic rendering (`asChild`):\n * ```tsx\n * <Button asChild>\n * <a href=\"/dashboard\">Go to Dashboard</a>\n * </Button>\n * ```\n * > Tooltip via `message` or native `title`:\n * ```tsx\n * <Button title=\"Tooltip text\">Hover me</Button>\n * <Button message=\"Tooltip content\">Hover me</Button>\n * ```\n * > Loading state:\n * ```tsx\n * <Button loading>Processing...</Button>\n * ```\n * > Disabled:\n * ```tsx\n * <Button disabled>Disabled</Button>\n * ```\n *\n * @remarks\n * - Designed for texted usage. If you need icon-only, use `ButtonIcon`.\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\n *\n * @see {@link ButtonIcon} for icon-only buttons\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (props, ref) => {\n const {\n disabled,\n className,\n variant,\n color,\n size,\n asChild = false,\n title = '',\n tooltip,\n tooltipProps = {},\n message,\n loading = false,\n children,\n startAdornment,\n endAdornment,\n screenReader,\n ...rest\n } = props;\n const Comp = asChild ? Slot : \"button\"\n const msg = message || tooltip || title;\n\n const content = asChild\n ? children\n : (\n <>\n {!!startAdornment && (\n <LoadedIcon loading={loading} size={size}>\n {renderAdornment(startAdornment)}\n </LoadedIcon>\n )}\n\n {children}\n\n {!!endAdornment && (\n <LoadedIcon loading={loading} size={size}>\n {renderAdornment(endAdornment)}\n </LoadedIcon>\n )}\n </>\n )\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n buttonVariants({\n ...normalizedVariantProperties({ variant, size, color }),\n className\n }),\n loading && 'pointer-events-none opacity-80 user-select-none',\n )}\n {...rest}\n >\n {content}\n {!!screenReader && <span className=\"sr-only\">\n {typeof screenReader === 'string' ? screenReader : screenReader.text}\n </span>}\n </Comp>\n )\n\n if (!msg) return cmp\n return (\n <Tooltip\n {...(tooltipProps || {})}\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n message={msg}\n >\n {cmp}\n </Tooltip>\n )\n }\n)\nButton.displayName = \"Button\"\nexport default Button;\n"],"names":["normalizedVariantProperties","props","variant","size","color","vls","renderAdornment","Adornment","isValidElement","createElement","Button","React","ref","disabled","className","asChild","title","tooltip","tooltipProps","message","loading","children","startAdornment","endAdornment","screenReader","rest","Comp","Slot","msg","content","jsxs","Fragment","jsx","LoadedIcon","cmp","cn","buttonVariants","Tooltip"],"mappings":";;;;;;;;;AAWA,MAAMA,IAA8B,CAACC,MAA0C;AAC7E,QAAM,EAAE,SAAAC,GAAS,MAAAC,GAAM,OAAAC,EAAA,IAAUH,GAC3BI,IAAM,EAAE,OAAAD,GAAO,SAAAF,GAAS,MAAAC,EAAA;AAC9B,MAAID,MAAY;AACd,mBAAQ,KAAK,+FAA+F,GAC5GG,EAAI,UAAU,aACdA,EAAI,QAAQ,WACLA;AAET,MAAKF,MAAoB;AACvB,mBAAQ,KAAK,iFAAiF,GAC9FE,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA;AAGT,MAAKH,MAAuB;AAC1B,kBAAQ,KAAK,6EAA6E,GACpF,IAAI,MAAM,6EAA6E;AAE/F,SAAIA,MAAY,aACd,QAAQ,KAAK,8FAA8F,GAC3GG,EAAI,UAAU,YACdA,EAAI,QAAQ,WACLA,KAELH,MAAY,eACd,QAAQ,KAAK,mGAAmG,GAChHG,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA,MAELH,MAAY,kBACd,QAAQ,KAAK,iGAAiG,GAC9GG,EAAI,UAAU,aACdA,EAAI,QAAQ,UACLA;AAGX,GAEMC,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAS,IAAUA,IAC/BE,EAAcF,CAAS,IAFP,MA+DZG,IAASC,EAAM;AAAA,EAC1B,CAACV,GAAOW,MAAQ;AACd,UAAM;AAAA,MACJ,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,SAAAZ;AAAA,MACA,OAAAE;AAAA,MACA,MAAAD;AAAA,MACA,SAAAY,IAAU;AAAA,MACV,OAAAC,IAAQ;AAAA,MACR,SAAAC;AAAA,MACA,cAAAC,IAAe,CAAA;AAAA,MACf,SAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDxB,GACEyB,IAAOX,IAAUY,IAAO,UACxBC,IAAMT,KAAWF,KAAWD,GAE5Ba,IAAUd,IACZM,IAEA,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,MAAA,CAAC,CAACT,KACD,gBAAAU,EAACC,GAAA,EAAW,SAAAb,GAAkB,MAAAjB,GAC3B,UAAAG,EAAgBgB,CAAc,GACjC;AAAA,MAGDD;AAAA,MAEA,CAAC,CAACE,KACD,gBAAAS,EAACC,KAAW,SAAAb,GAAkB,MAAAjB,GAC3B,UAAAG,EAAgBiB,CAAY,EAAA,CAC/B;AAAA,IAAA,GAEJ,GAGEW,IACJ,gBAAAJ;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAd;AAAA,QACA,UAAAC;AAAA,QACA,WAAWsB;AAAA,UACTC,EAAe;AAAA,YACb,GAAGpC,EAA4B,EAAE,SAAAE,GAAS,MAAAC,GAAM,OAAAC,GAAO;AAAA,YACvD,WAAAU;AAAA,UAAA,CACD;AAAA,UACDM,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAI;AAAA,UACA,CAAC,CAACL,KAAgB,gBAAAQ,EAAC,QAAA,EAAK,WAAU,WAChC,UAAA,OAAOR,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAClE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAKI,IAEH,gBAAAI;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAInB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASL,KAAYO,KAAW,CAACQ,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAM;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAxB,EAAO,cAAc;"}
@@ -11,6 +11,10 @@ export interface ButtonDefaultProps extends Omit<ButtonAttributes, 'color' | 'ti
11
11
  asChild?: boolean;
12
12
  loading?: boolean;
13
13
  disabled?: boolean;
14
+ /**
15
+ * Screen reader text or options used for accessibility (e.g., when the button is loading).
16
+ * Accepts a string or an object with a `text` property for more control.
17
+ */
14
18
  screenReader?: ButtonScreenReader;
15
19
  }
16
20
  export interface ButtonTooltipProps {
@@ -1 +1 @@
1
- {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEhE,KAAK,yBAAyB,GAAG;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAA;AACD,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,MAAM,CAAC,GAAG,yBAAyB,CAAA;AAE9F,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,MAAM,eAAe,CACzB,YAAY,SAAS,MAAM,GAAG,MAAM,EACpC,SAAS,GAAG,OAAO,IAEnB,kBAAkB,GAClB,kBAAkB,GAClB,YAAY,GAAG;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,eAAe;CAAG;AAEnC,MAAM,MAAM,cAAc,GACtB,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GACtC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE1C,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAElD,MAAM,WAAW,WACf,SAAQ,eAAe,CAAC,mBAAmB,EAAE,eAAe,CAAC;IAC7D,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC"}
1
+ {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEhE,KAAK,yBAAyB,GAAG;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAA;AACD,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,MAAM,CAAC,GAAG,yBAAyB,CAAA;AAE9F,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,MAAM,eAAe,CACzB,YAAY,SAAS,MAAM,GAAG,MAAM,EACpC,SAAS,GAAG,OAAO,IAEnB,kBAAkB,GAClB,kBAAkB,GAClB,YAAY,GAAG;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,eAAe;CAAG;AAEnC,MAAM,MAAM,cAAc,GACtB,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GACtC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE1C,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAElD,MAAM,WAAW,WACf,SAAQ,eAAe,CAAC,mBAAmB,EAAE,eAAe,CAAC;IAC7D,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC"}
@@ -48,7 +48,7 @@ import * as React from "react";
48
48
  * - Designed for icon-only usage. If you need text, use `Button`.
49
49
  * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.
50
50
  *
51
- * @see {@link ButtonIcon} for icon-only buttons
51
+ * @see {@link Button} for regular text buttons
52
52
  */
53
53
  export declare const ButtonIcon: React.ForwardRefExoticComponent<ButtonIconProps & React.RefAttributes<HTMLButtonElement>>;
54
54
  export default ButtonIcon;
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonIcon.js","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { buttonIconVariants } from './buttonIconVariants';\nimport { ButtonIconProps } from './ButtonIcon.types';\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\nimport { ButtonIconType } from \"../Button\";\nimport { createElement, isValidElement } from \"react\";\n\nconst renderInnerIcon = (Icon?: ButtonIconType) => {\n if (!Icon) return null;\n if (isValidElement(Icon)) return Icon;\n return createElement(Icon);\n};\n\n/**\n * Icon-only version of the Button component.\n *\n * `ButtonIcon` is used for compact actions represented by an icon instead of text.\n * Supports all core features of Button: variants, sizes, tooltips, disabled and loading state.\n *\n * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { ButtonIcon } from '@oneplatformdev/ui/ButtonIcon';\n * ```\n * > Basic usage by icon:\n * ```tsx\n *<ButtonIcon icon={<PlusIcon />}/>\n *<ButtonIcon icon={PlusIcon}/>\n * ```\n * > Basic usage by children:\n * ```tsx\n *<ButtonIcon>\n * <PlusIcon />\n *</ButtonIcon>\n * ```\n * > With variant & color:\n * ```tsx\n *<ButtonIcon variant=\"outline\" color=\"primary\">\n * <Search />\n *</ButtonIcon>\n * ```\n * > With tooltip message:\n * ```tsx\n *<ButtonIcon message=\"Edit item\">\n * <PencilLine />\n *</ButtonIcon>\n * ```\n * > Loading state:\n * ```tsx\n *<ButtonIcon loading>\n * <Trash2 />\n *</ButtonIcon>\n * ```\n *\n * @remarks\n * - Designed for icon-only usage. If you need text, use `Button`.\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\n *\n * @see {@link ButtonIcon} for icon-only buttons\n */\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n (props, ref) => {\n const {\n asChild,\n children,\n icon,\n disabled = false,\n loading = false,\n message,\n title = '',\n tooltipProps = {},\n className,\n variant,\n color,\n size,\n rounded,\n screenReader,\n ...rest\n } = props;\n\n const Comp = asChild ? Slot : \"button\"\n const msg = message || title;\n\n const content = asChild\n ? children\n : (\n <LoadedIcon loading={loading} size={size}>\n {renderInnerIcon(icon) ?? children}\n </LoadedIcon>\n )\n\n if (!content) return null;\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n buttonIconVariants({\n variant, size, color, rounded,\n className\n }),\n loading && 'pointer-events-none opacity-80',\n )}\n {...rest}\n >\n {content}\n {!!screenReader && <span className=\"sr-only\">\n {typeof screenReader === 'string' ? screenReader : screenReader.text}\n </span>}\n </Comp>\n )\n\n if (!msg) return cmp\n return (\n <Tooltip\n {...(tooltipProps || {})}\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n message={msg}\n >\n {cmp}\n </Tooltip>\n )\n }\n)\nButtonIcon.displayName = \"Button\"\nexport default ButtonIcon;\n"],"names":["renderInnerIcon","Icon","isValidElement","createElement","ButtonIcon","React","props","ref","asChild","children","icon","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","screenReader","rest","Comp","Slot","msg","content","jsx","LoadedIcon","cmp","jsxs","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAI,IAAUA,IAC1BE,EAAcF,CAAI,IAFP,MAuDPG,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,SAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,cAAAC,IAAe,CAAA;AAAA,MACf,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDhB,GAEEiB,IAAOf,IAAUgB,IAAO,UACxBC,IAAMZ,KAAWC,GAEjBY,IAAUlB,IACZC,IAEA,gBAAAkB,EAACC,GAAA,EAAW,SAAAhB,GAAkB,MAAAO,GAC3B,UAAAnB,EAAgBU,CAAI,KAAKD,EAAA,CAC5B;AAGJ,QAAI,CAACiB,EAAS,QAAO;AAErB,UAAMG,IACJ,gBAAAC;AAAA,MAACP;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAhB;AAAA,QACA,UAAAI;AAAA,QACA,WAAWoB;AAAA,UACTC,EAAmB;AAAA,YACjB,SAAAf;AAAA,YAAS,MAAAE;AAAA,YAAM,OAAAD;AAAA,YAAO,SAAAE;AAAA,YACtB,WAAAJ;AAAA,UAAA,CACD;AAAA,UACDJ,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGU;AAAA,QAEH,UAAA;AAAA,UAAAI;AAAA,UACA,CAAC,CAACL,KAAgB,gBAAAM,EAAC,QAAA,EAAK,WAAU,WAChC,UAAA,OAAON,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAClE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAKI,IAEH,gBAAAE;AAAA,MAACM;AAAA,MAAA;AAAA,QACE,GAAIlB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASJ,KAAYC,KAAW,CAACa,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAI;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAzB,EAAW,cAAc;"}
1
+ {"version":3,"file":"ButtonIcon.js","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { buttonIconVariants } from './buttonIconVariants';\nimport { ButtonIconProps } from './ButtonIcon.types';\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\nimport { ButtonIconType } from \"../Button\";\nimport { createElement, isValidElement } from \"react\";\n\nconst renderInnerIcon = (Icon?: ButtonIconType) => {\n if (!Icon) return null;\n if (isValidElement(Icon)) return Icon;\n return createElement(Icon);\n};\n\n/**\n * Icon-only version of the Button component.\n *\n * `ButtonIcon` is used for compact actions represented by an icon instead of text.\n * Supports all core features of Button: variants, sizes, tooltips, disabled and loading state.\n *\n * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { ButtonIcon } from '@oneplatformdev/ui/ButtonIcon';\n * ```\n * > Basic usage by icon:\n * ```tsx\n *<ButtonIcon icon={<PlusIcon />}/>\n *<ButtonIcon icon={PlusIcon}/>\n * ```\n * > Basic usage by children:\n * ```tsx\n *<ButtonIcon>\n * <PlusIcon />\n *</ButtonIcon>\n * ```\n * > With variant & color:\n * ```tsx\n *<ButtonIcon variant=\"outline\" color=\"primary\">\n * <Search />\n *</ButtonIcon>\n * ```\n * > With tooltip message:\n * ```tsx\n *<ButtonIcon message=\"Edit item\">\n * <PencilLine />\n *</ButtonIcon>\n * ```\n * > Loading state:\n * ```tsx\n *<ButtonIcon loading>\n * <Trash2 />\n *</ButtonIcon>\n * ```\n *\n * @remarks\n * - Designed for icon-only usage. If you need text, use `Button`.\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\n *\n * @see {@link Button} for regular text buttons\n */\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n (props, ref) => {\n const {\n asChild,\n children,\n icon,\n disabled = false,\n loading = false,\n message,\n title = '',\n tooltipProps = {},\n className,\n variant,\n color,\n size,\n rounded,\n screenReader,\n ...rest\n } = props;\n\n const Comp = asChild ? Slot : \"button\"\n const msg = message || title;\n\n const content = asChild\n ? children\n : (\n <LoadedIcon loading={loading} size={size}>\n {renderInnerIcon(icon) ?? children}\n </LoadedIcon>\n )\n\n if (!content) return null;\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n buttonIconVariants({\n variant, size, color, rounded,\n className\n }),\n loading && 'pointer-events-none opacity-80',\n )}\n {...rest}\n >\n {content}\n {!!screenReader && <span className=\"sr-only\">\n {typeof screenReader === 'string' ? screenReader : screenReader.text}\n </span>}\n </Comp>\n )\n\n if (!msg) return cmp\n return (\n <Tooltip\n {...(tooltipProps || {})}\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n message={msg}\n >\n {cmp}\n </Tooltip>\n )\n }\n)\nButtonIcon.displayName = \"Button\"\nexport default ButtonIcon;\n"],"names":["renderInnerIcon","Icon","isValidElement","createElement","ButtonIcon","React","props","ref","asChild","children","icon","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","screenReader","rest","Comp","Slot","msg","content","jsx","LoadedIcon","cmp","jsxs","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAI,IAAUA,IAC1BE,EAAcF,CAAI,IAFP,MAuDPG,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,SAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,cAAAC,IAAe,CAAA;AAAA,MACf,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDhB,GAEEiB,IAAOf,IAAUgB,IAAO,UACxBC,IAAMZ,KAAWC,GAEjBY,IAAUlB,IACZC,IAEA,gBAAAkB,EAACC,GAAA,EAAW,SAAAhB,GAAkB,MAAAO,GAC3B,UAAAnB,EAAgBU,CAAI,KAAKD,EAAA,CAC5B;AAGJ,QAAI,CAACiB,EAAS,QAAO;AAErB,UAAMG,IACJ,gBAAAC;AAAA,MAACP;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAhB;AAAA,QACA,UAAAI;AAAA,QACA,WAAWoB;AAAA,UACTC,EAAmB;AAAA,YACjB,SAAAf;AAAA,YAAS,MAAAE;AAAA,YAAM,OAAAD;AAAA,YAAO,SAAAE;AAAA,YACtB,WAAAJ;AAAA,UAAA,CACD;AAAA,UACDJ,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGU;AAAA,QAEH,UAAA;AAAA,UAAAI;AAAA,UACA,CAAC,CAACL,KAAgB,gBAAAM,EAAC,QAAA,EAAK,WAAU,WAChC,UAAA,OAAON,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAClE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAKI,IAEH,gBAAAE;AAAA,MAACM;AAAA,MAAA;AAAA,QACE,GAAIlB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASJ,KAAYC,KAAW,CAACa,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAI;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAzB,EAAW,cAAc;"}
package/CHANGELOG.md CHANGED
@@ -1,3 +1,36 @@
1
+ ## 0.1.99-beta.8 (2025-12-30)
2
+
3
+ ### 🚀 Features
4
+
5
+ - **Textarea:** update styles and add new story for Textarea component ([9bafda1](https://github.com/oneplatformdev/core-web/commit/9bafda1))
6
+ - **Button:** add screen reader text options for improved accessibility ([9b93d9d](https://github.com/oneplatformdev/core-web/commit/9b93d9d))
7
+
8
+ ### 🧱 Updated Dependencies
9
+
10
+ - Updated @oneplatformdev/utils to 0.1.99-beta.8
11
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.8
12
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.8
13
+
14
+ ### ❤️ Thank You
15
+
16
+ - Bohdan Radchenko
17
+
18
+ ## 0.1.99-beta.7 (2025-12-29)
19
+
20
+ ### 🚀 Features
21
+
22
+ - **Button:** add screen reader support for accessibility ([ec7de8e](https://github.com/oneplatformdev/core-web/commit/ec7de8e))
23
+
24
+ ### 🧱 Updated Dependencies
25
+
26
+ - Updated @oneplatformdev/utils to 0.1.99-beta.7
27
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.7
28
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.7
29
+
30
+ ### ❤️ Thank You
31
+
32
+ - Bohdan Radchenko
33
+
1
34
  ## 0.1.99-beta.6 (2025-12-29)
2
35
 
3
36
  ### 🚀 Features
@@ -1,4 +1,4 @@
1
- import { jsxs as l, Fragment as g, jsx as b } from "react/jsx-runtime";
1
+ import { jsxs as l, Fragment as p, jsx as b } from "react/jsx-runtime";
2
2
  import * as h from "react";
3
3
  import { useId as A, useRef as v, useState as w, useImperativeHandle as z, useEffect as F } from "react";
4
4
  import { cn as d } from "@oneplatformdev/utils";
@@ -9,12 +9,12 @@ const y = h.forwardRef(
9
9
  className: c,
10
10
  value: t = "",
11
11
  maxHeight: o = Number.MAX_SAFE_INTEGER,
12
- minHeight: i = 0,
12
+ minHeight: i = 40,
13
13
  resizeble: f = !0,
14
14
  counter: s = !1,
15
15
  id: n = "",
16
16
  ...r
17
- } = u, a = A(), e = v(null), [x, p] = w("");
17
+ } = u, a = A(), e = v(null), [x, g] = w("");
18
18
  return N({
19
19
  textAreaRef: e,
20
20
  triggerAutoSize: x,
@@ -27,8 +27,8 @@ const y = h.forwardRef(
27
27
  maxHeight: o,
28
28
  minHeight: i
29
29
  })), F(() => {
30
- p(t);
31
- }, [r?.defaultValue, t]), /* @__PURE__ */ l(g, { children: [
30
+ g(t);
31
+ }, [r?.defaultValue, t]), /* @__PURE__ */ l(p, { children: [
32
32
  /* @__PURE__ */ b(
33
33
  "textarea",
34
34
  {
@@ -38,7 +38,7 @@ const y = h.forwardRef(
38
38
  value: t,
39
39
  className: d(
40
40
  "flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm",
41
- "rounded-[12px] border border-input bg-[#FCFCFC] shadow-none",
41
+ "rounded-lg border border-input bg-[#FCFCFC] shadow-none",
42
42
  "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
43
43
  "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
44
44
  f ? "resize" : "resize-none overflow-hidden!",
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';\nimport { cn } from '@oneplatformdev/utils';\n\nimport { TextareaProps } from './Textarea.types';\nimport { useAutosizeTextArea } from './useAutosizeTextArea';\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n (textareaProps, ref) => {\n const {\n className,\n value = '',\n maxHeight = Number.MAX_SAFE_INTEGER,\n minHeight = 0,\n resizeble = true,\n counter = false,\n id: customId = '',\n ...props\n } = textareaProps;\n const id = useId();\n const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n const [triggerAutoSize, setTriggerAutoSize] = useState('');\n\n useAutosizeTextArea({\n textAreaRef,\n triggerAutoSize: triggerAutoSize,\n maxHeight,\n minHeight,\n });\n\n useImperativeHandle(ref, () => ({\n ...((textAreaRef.current ?? {}) as HTMLTextAreaElement),\n textArea: textAreaRef.current as HTMLTextAreaElement,\n focus: () => textAreaRef?.current?.focus(),\n maxHeight,\n minHeight,\n }));\n\n useEffect(() => {\n setTriggerAutoSize(value as string);\n }, [props?.defaultValue, value]);\n\n return (\n <>\n <textarea\n id={customId || id}\n {...props}\n ref={textAreaRef}\n value={value}\n className={cn(\n 'flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm',\n 'rounded-[12px] border border-input bg-[#FCFCFC] shadow-none',\n 'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n resizeble ? 'resize' : 'resize-none overflow-hidden!',\n counter && 'pb-2',\n className\n )}\n />\n {counter && (\n <label\n htmlFor={customId || id}\n className={cn(\n 'w-full text-right inline-flex items-center justify-end',\n 'text-sm font-normal text-muted-foreground',\n 'leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n )}\n >\n {String(value || '').length} / {props?.maxLength}\n </label>\n )}\n </>\n );\n }\n);\nTextarea.displayName = 'Textarea';\n\nexport { Textarea };\n"],"names":["Textarea","React","textareaProps","ref","className","value","maxHeight","minHeight","resizeble","counter","customId","props","id","useId","textAreaRef","useRef","triggerAutoSize","setTriggerAutoSize","useState","useAutosizeTextArea","useImperativeHandle","useEffect","jsxs","Fragment","jsx","cn"],"mappings":";;;;;AAOA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAACC,GAAeC,MAAQ;AACtB,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,WAAAC,IAAY,OAAO;AAAA,MACnB,WAAAC,IAAY;AAAA,MACZ,WAAAC,IAAY;AAAA,MACZ,SAAAC,IAAU;AAAA,MACV,IAAIC,IAAW;AAAA,MACf,GAAGC;AAAA,IAAA,IACDT,GACEU,IAAKC,EAAA,GACLC,IAAcC,EAAmC,IAAI,GACrD,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAE;AAEzD,WAAAC,EAAoB;AAAA,MAClB,aAAAL;AAAA,MACA,iBAAAE;AAAA,MACA,WAAAV;AAAA,MACA,WAAAC;AAAA,IAAA,CACD,GAEDa,EAAoBjB,GAAK,OAAO;AAAA,MAC9B,GAAKW,EAAY,WAAW,CAAA;AAAA,MAC5B,UAAUA,EAAY;AAAA,MACtB,OAAO,MAAMA,GAAa,SAAS,MAAA;AAAA,MACnC,WAAAR;AAAA,MACA,WAAAC;AAAA,IAAA,EACA,GAEFc,EAAU,MAAM;AACd,MAAAJ,EAAmBZ,CAAe;AAAA,IACpC,GAAG,CAACM,GAAO,cAAcN,CAAK,CAAC,GAG7B,gBAAAiB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAId,KAAYE;AAAA,UACf,GAAGD;AAAA,UACJ,KAAKG;AAAA,UACL,OAAAT;AAAA,UACA,WAAWoB;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAjB,IAAY,WAAW;AAAA,YACvBC,KAAW;AAAA,YACXL;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEDK,KACC,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASZ,KAAYE;AAAA,UACrB,WAAWa;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAA,OAAOpB,KAAS,EAAE,EAAE;AAAA,YAAO;AAAA,YAAIM,GAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC,GAEJ;AAAA,EAEJ;AACF;AACAX,EAAS,cAAc;"}
1
+ {"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';\nimport { cn } from '@oneplatformdev/utils';\n\nimport { TextareaProps } from './Textarea.types';\nimport { useAutosizeTextArea } from './useAutosizeTextArea';\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n (textareaProps, ref) => {\n const {\n className,\n value = '',\n maxHeight = Number.MAX_SAFE_INTEGER,\n minHeight = 40,\n resizeble = true,\n counter = false,\n id: customId = '',\n ...props\n } = textareaProps;\n const id = useId();\n const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n const [triggerAutoSize, setTriggerAutoSize] = useState('');\n\n useAutosizeTextArea({\n textAreaRef,\n triggerAutoSize: triggerAutoSize,\n maxHeight,\n minHeight,\n });\n\n useImperativeHandle(ref, () => ({\n ...((textAreaRef.current ?? {}) as HTMLTextAreaElement),\n textArea: textAreaRef.current as HTMLTextAreaElement,\n focus: () => textAreaRef?.current?.focus(),\n maxHeight,\n minHeight,\n }));\n\n useEffect(() => {\n setTriggerAutoSize(value as string);\n }, [props?.defaultValue, value]);\n\n return (\n <>\n <textarea\n id={customId || id}\n {...props}\n ref={textAreaRef}\n value={value}\n className={cn(\n 'flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm',\n 'rounded-lg border border-input bg-[#FCFCFC] shadow-none',\n 'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n resizeble ? 'resize' : 'resize-none overflow-hidden!',\n counter && 'pb-2',\n className\n )}\n />\n {counter && (\n <label\n htmlFor={customId || id}\n className={cn(\n 'w-full text-right inline-flex items-center justify-end',\n 'text-sm font-normal text-muted-foreground',\n 'leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n )}\n >\n {String(value || '').length} / {props?.maxLength}\n </label>\n )}\n </>\n );\n }\n);\nTextarea.displayName = 'Textarea';\n\nexport { Textarea };\n"],"names":["Textarea","React","textareaProps","ref","className","value","maxHeight","minHeight","resizeble","counter","customId","props","id","useId","textAreaRef","useRef","triggerAutoSize","setTriggerAutoSize","useState","useAutosizeTextArea","useImperativeHandle","useEffect","jsxs","Fragment","jsx","cn"],"mappings":";;;;;AAOA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAACC,GAAeC,MAAQ;AACtB,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,WAAAC,IAAY,OAAO;AAAA,MACnB,WAAAC,IAAY;AAAA,MACZ,WAAAC,IAAY;AAAA,MACZ,SAAAC,IAAU;AAAA,MACV,IAAIC,IAAW;AAAA,MACf,GAAGC;AAAA,IAAA,IACDT,GACEU,IAAKC,EAAA,GACLC,IAAcC,EAAmC,IAAI,GACrD,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAE;AAEzD,WAAAC,EAAoB;AAAA,MAClB,aAAAL;AAAA,MACA,iBAAAE;AAAA,MACA,WAAAV;AAAA,MACA,WAAAC;AAAA,IAAA,CACD,GAEDa,EAAoBjB,GAAK,OAAO;AAAA,MAC9B,GAAKW,EAAY,WAAW,CAAA;AAAA,MAC5B,UAAUA,EAAY;AAAA,MACtB,OAAO,MAAMA,GAAa,SAAS,MAAA;AAAA,MACnC,WAAAR;AAAA,MACA,WAAAC;AAAA,IAAA,EACA,GAEFc,EAAU,MAAM;AACd,MAAAJ,EAAmBZ,CAAe;AAAA,IACpC,GAAG,CAACM,GAAO,cAAcN,CAAK,CAAC,GAG7B,gBAAAiB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAId,KAAYE;AAAA,UACf,GAAGD;AAAA,UACJ,KAAKG;AAAA,UACL,OAAAT;AAAA,UACA,WAAWoB;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAjB,IAAY,WAAW;AAAA,YACvBC,KAAW;AAAA,YACXL;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEDK,KACC,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASZ,KAAYE;AAAA,UACrB,WAAWa;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAA,OAAOpB,KAAS,EAAE,EAAE;AAAA,YAAO;AAAA,YAAIM,GAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC,GAEJ;AAAA,EAEJ;AACF;AACAX,EAAS,cAAc;"}
@@ -0,0 +1,12 @@
1
+ import { Textarea as t } from "./Textarea.js";
2
+ const a = {
3
+ title: "Textarea",
4
+ component: t
5
+ }, o = {
6
+ args: {}
7
+ };
8
+ export {
9
+ o as Default,
10
+ a as default
11
+ };
12
+ //# sourceMappingURL=Textarea.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Textarea.stories.js","sources":["../../src/Textarea/Textarea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Textarea } from './Textarea';\n\nconst meta = {\n title: 'Textarea',\n component: Textarea,\n} satisfies Meta<typeof Textarea>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {}\n};\n"],"names":["meta","Textarea","Default"],"mappings":";AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AACb,GAMaC,IAAiB;AAAA,EAC5B,MAAM,CAAA;AACR;"}
@@ -1,3 +1,3 @@
1
- import { IUseAutosizeTextAreaProps } from '../../projects/ui/src/index.ts';
1
+ import { IUseAutosizeTextAreaProps } from './Textarea.types';
2
2
  export declare const useAutosizeTextArea: ({ textAreaRef, triggerAutoSize, maxHeight, minHeight, }: IUseAutosizeTextAreaProps) => void;
3
3
  //# sourceMappingURL=useAutosizeTextArea.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useAutosizeTextArea.d.ts","sourceRoot":"","sources":["../../src/Textarea/useAutosizeTextArea.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,eAAO,MAAM,mBAAmB,GAAI,yDAKjC,yBAAyB,SAsB3B,CAAC"}
1
+ {"version":3,"file":"useAutosizeTextArea.d.ts","sourceRoot":"","sources":["../../src/Textarea/useAutosizeTextArea.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,eAAO,MAAM,mBAAmB,GAAI,yDAKjC,yBAAyB,SAsB3B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"useAutosizeTextArea.js","sources":["../../src/Textarea/useAutosizeTextArea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IUseAutosizeTextAreaProps } from '@oneplatformdev/ui';\n\nexport const useAutosizeTextArea = ({\n textAreaRef,\n triggerAutoSize,\n maxHeight = Number.MAX_SAFE_INTEGER,\n minHeight = 0,\n}: IUseAutosizeTextAreaProps) => {\n const [init, setInit] = React.useState(true);\n React.useEffect(() => {\n const offsetBorder = 0;\n const textAreaElement = textAreaRef.current;\n if (textAreaElement) {\n if (init) {\n textAreaElement.style.minHeight = `${minHeight + offsetBorder}px`;\n if (maxHeight > minHeight) {\n textAreaElement.style.maxHeight = `${maxHeight}px`;\n }\n setInit(false);\n }\n textAreaElement.style.height = `${minHeight + offsetBorder}px`;\n const scrollHeight = textAreaElement.scrollHeight;\n if (scrollHeight > maxHeight) {\n textAreaElement.style.height = `${maxHeight}px`;\n } else {\n textAreaElement.style.height = `${scrollHeight + offsetBorder}px`;\n }\n }\n }, [textAreaRef.current, triggerAutoSize]);\n};\n"],"names":["useAutosizeTextArea","textAreaRef","triggerAutoSize","maxHeight","minHeight","init","setInit","React","textAreaElement","scrollHeight"],"mappings":";AAKO,MAAMA,IAAsB,CAAC;AAAA,EAClC,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC,IAAY,OAAO;AAAA,EACnB,WAAAC,IAAY;AACd,MAAiC;AAC/B,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAM,SAAS,EAAI;AAC3C,EAAAA,EAAM,UAAU,MAAM;AAEpB,UAAMC,IAAkBP,EAAY;AACpC,QAAIO,GAAiB;AACnB,MAAIH,MACFG,EAAgB,MAAM,YAAY,GAAGJ,IAAY,CAAY,MACzDD,IAAYC,MACdI,EAAgB,MAAM,YAAY,GAAGL,CAAS,OAEhDG,EAAQ,EAAK,IAEfE,EAAgB,MAAM,SAAS,GAAGJ,IAAY,CAAY;AAC1D,YAAMK,IAAeD,EAAgB;AACrC,MAAIC,IAAeN,IACjBK,EAAgB,MAAM,SAAS,GAAGL,CAAS,OAE3CK,EAAgB,MAAM,SAAS,GAAGC,IAAe,CAAY;AAAA,IAEjE;AAAA,EACF,GAAG,CAACR,EAAY,SAASC,CAAe,CAAC;AAC3C;"}
1
+ {"version":3,"file":"useAutosizeTextArea.js","sources":["../../src/Textarea/useAutosizeTextArea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IUseAutosizeTextAreaProps } from './Textarea.types';\n\nexport const useAutosizeTextArea = ({\n textAreaRef,\n triggerAutoSize,\n maxHeight = Number.MAX_SAFE_INTEGER,\n minHeight = 0,\n}: IUseAutosizeTextAreaProps) => {\n const [init, setInit] = React.useState(true);\n React.useEffect(() => {\n const offsetBorder = 0;\n const textAreaElement = textAreaRef.current;\n if (textAreaElement) {\n if (init) {\n textAreaElement.style.minHeight = `${minHeight + offsetBorder}px`;\n if (maxHeight > minHeight) {\n textAreaElement.style.maxHeight = `${maxHeight}px`;\n }\n setInit(false);\n }\n textAreaElement.style.height = `${minHeight + offsetBorder}px`;\n const scrollHeight = textAreaElement.scrollHeight;\n if (scrollHeight > maxHeight) {\n textAreaElement.style.height = `${maxHeight}px`;\n } else {\n textAreaElement.style.height = `${scrollHeight + offsetBorder}px`;\n }\n }\n }, [textAreaRef.current, triggerAutoSize]);\n};\n"],"names":["useAutosizeTextArea","textAreaRef","triggerAutoSize","maxHeight","minHeight","init","setInit","React","textAreaElement","scrollHeight"],"mappings":";AAKO,MAAMA,IAAsB,CAAC;AAAA,EAClC,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC,IAAY,OAAO;AAAA,EACnB,WAAAC,IAAY;AACd,MAAiC;AAC/B,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAM,SAAS,EAAI;AAC3C,EAAAA,EAAM,UAAU,MAAM;AAEpB,UAAMC,IAAkBP,EAAY;AACpC,QAAIO,GAAiB;AACnB,MAAIH,MACFG,EAAgB,MAAM,YAAY,GAAGJ,IAAY,CAAY,MACzDD,IAAYC,MACdI,EAAgB,MAAM,YAAY,GAAGL,CAAS,OAEhDG,EAAQ,EAAK,IAEfE,EAAgB,MAAM,SAAS,GAAGJ,IAAY,CAAY;AAC1D,YAAMK,IAAeD,EAAgB;AACrC,MAAIC,IAAeN,IACjBK,EAAgB,MAAM,SAAS,GAAGL,CAAS,OAE3CK,EAAgB,MAAM,SAAS,GAAGC,IAAe,CAAY;AAAA,IAEjE;AAAA,EACF,GAAG,CAACR,EAAY,SAASC,CAAe,CAAC;AAC3C;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.1.99-beta.6",
3
+ "version": "0.1.99-beta.8",
4
4
  "description": "UI component library for OnePlatform",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [
@@ -105,9 +105,9 @@
105
105
  "recharts": "^3.2.0",
106
106
  "sonner": "^2.0.7",
107
107
  "vaul": "^1.1.2",
108
- "@oneplatformdev/hooks": "^0.1.99-beta.6",
109
- "@oneplatformdev/tokens": "^0.1.99-beta.6",
110
- "@oneplatformdev/utils": "^0.1.99-beta.6"
108
+ "@oneplatformdev/hooks": "^0.1.99-beta.8",
109
+ "@oneplatformdev/tokens": "^0.1.99-beta.8",
110
+ "@oneplatformdev/utils": "^0.1.99-beta.8"
111
111
  },
112
112
  "scripts": {
113
113
  "chromatic": "chromatic"