@shapesos/clay 0.5.1 → 0.6.0

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 (52) hide show
  1. package/dist/chat.cjs +17 -15
  2. package/dist/chat.cjs.map +1 -1
  3. package/dist/chat.d.cts +14 -0
  4. package/dist/chat.d.ts +14 -0
  5. package/dist/chat.js +3 -3
  6. package/dist/{chunk-SYMZU32H.js → chunk-J6VPAHO3.js} +16 -16
  7. package/dist/chunk-J6VPAHO3.js.map +1 -0
  8. package/dist/{chunk-K2Q5MQWJ.js → chunk-KNYB3RL7.js} +1 -1
  9. package/dist/chunk-KNYB3RL7.js.map +1 -0
  10. package/dist/{chunk-WZHNMC6P.js → chunk-L6DUGB2E.js} +3 -1
  11. package/dist/chunk-L6DUGB2E.js.map +1 -0
  12. package/dist/{chunk-WQ2QTUYA.js → chunk-SV24ONND.js} +3 -1
  13. package/dist/chunk-SV24ONND.js.map +1 -0
  14. package/dist/{chunk-JC2RQL5O.js → chunk-TDMJUF4A.js} +3 -3
  15. package/dist/{chunk-SMTOVZ3O.js → chunk-WYGH3FKT.js} +1 -1
  16. package/dist/chunk-WYGH3FKT.js.map +1 -0
  17. package/dist/icon.cjs.map +1 -1
  18. package/dist/icon.d.cts +20 -1
  19. package/dist/icon.d.ts +20 -1
  20. package/dist/index.cjs +17 -13
  21. package/dist/index.cjs.map +1 -1
  22. package/dist/index.d.cts +1 -1
  23. package/dist/index.d.ts +1 -1
  24. package/dist/index.js +6 -6
  25. package/dist/keyboard-shortcut.cjs +2 -0
  26. package/dist/keyboard-shortcut.cjs.map +1 -1
  27. package/dist/keyboard-shortcut.d.cts +9 -0
  28. package/dist/keyboard-shortcut.d.ts +9 -0
  29. package/dist/keyboard-shortcut.js +1 -1
  30. package/dist/lottie.d.cts +26 -0
  31. package/dist/lottie.d.ts +26 -0
  32. package/dist/text-area.cjs +2 -0
  33. package/dist/text-area.cjs.map +1 -1
  34. package/dist/text-area.d.cts +10 -0
  35. package/dist/text-area.d.ts +10 -0
  36. package/dist/text-area.js +3 -3
  37. package/dist/tokens.cjs +2 -0
  38. package/dist/tokens.cjs.map +1 -1
  39. package/dist/tokens.d.cts +16 -0
  40. package/dist/tokens.d.ts +16 -0
  41. package/dist/tokens.js +1 -1
  42. package/dist/utils.cjs.map +1 -1
  43. package/dist/utils.d.cts +17 -0
  44. package/dist/utils.d.ts +17 -0
  45. package/dist/utils.js +2 -2
  46. package/package.json +3 -1
  47. package/dist/chunk-K2Q5MQWJ.js.map +0 -1
  48. package/dist/chunk-SMTOVZ3O.js.map +0 -1
  49. package/dist/chunk-SYMZU32H.js.map +0 -1
  50. package/dist/chunk-WQ2QTUYA.js.map +0 -1
  51. package/dist/chunk-WZHNMC6P.js.map +0 -1
  52. /package/dist/{chunk-JC2RQL5O.js.map → chunk-TDMJUF4A.js.map} +0 -0
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.cjs';
2
2
  export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MESSAGE_ROLE, MessageRole, useChatContext, useCopyToClipboard } from './chat.cjs';
3
- export { Icon, IconButton, IconButtonProps, IconButtonSize, IconProps } from './icon.cjs';
3
+ export { Icon, IconButton, IconButtonProps, IconButtonSize, IconButtonVariant, IconProps } from './icon.cjs';
4
4
  export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, KeyIcon, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutVariant } from './keyboard-shortcut.cjs';
5
5
  export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.cjs';
6
6
  export { TextArea, TextAreaProps } from './text-area.cjs';
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.js';
2
2
  export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MESSAGE_ROLE, MessageRole, useChatContext, useCopyToClipboard } from './chat.js';
3
- export { Icon, IconButton, IconButtonProps, IconButtonSize, IconProps } from './icon.js';
3
+ export { Icon, IconButton, IconButtonProps, IconButtonSize, IconButtonVariant, IconProps } from './icon.js';
4
4
  export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, KeyIcon, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutVariant } from './keyboard-shortcut.js';
5
5
  export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.js';
6
6
  export { TextArea, TextAreaProps } from './text-area.js';
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  MESSAGE_ROLE,
6
6
  useChatContext,
7
7
  useCopyToClipboard
8
- } from "./chunk-SYMZU32H.js";
8
+ } from "./chunk-J6VPAHO3.js";
9
9
  import "./chunk-72TJUKMV.js";
10
10
  import {
11
11
  IconButton
@@ -15,18 +15,18 @@ import {
15
15
  } from "./chunk-BIATJTD4.js";
16
16
  import {
17
17
  TextArea
18
- } from "./chunk-JC2RQL5O.js";
18
+ } from "./chunk-TDMJUF4A.js";
19
19
  import {
20
20
  fontFamilies,
21
21
  typographyMixin,
22
22
  typographyStyles,
23
23
  typographyTypes
24
- } from "./chunk-WQ2QTUYA.js";
24
+ } from "./chunk-SV24ONND.js";
25
25
  import {
26
26
  IconCtrl,
27
27
  KEYBOARD_SHORTCUT_VARIANTS,
28
28
  KeyboardShortcut
29
- } from "./chunk-WZHNMC6P.js";
29
+ } from "./chunk-L6DUGB2E.js";
30
30
  import {
31
31
  Icon
32
32
  } from "./chunk-OLJIJYB5.js";
@@ -36,10 +36,10 @@ import {
36
36
  import "./chunk-DRBRT57F.js";
37
37
  import {
38
38
  markdownToPlainText
39
- } from "./chunk-SMTOVZ3O.js";
39
+ } from "./chunk-WYGH3FKT.js";
40
40
  import {
41
41
  mergeRefs
42
- } from "./chunk-K2Q5MQWJ.js";
42
+ } from "./chunk-KNYB3RL7.js";
43
43
  import "./chunk-5WRI5ZAA.js";
44
44
  export {
45
45
  ChatContext,
@@ -171,7 +171,9 @@ var colors = {
171
171
 
172
172
  // src/components/keyboard-shortcut/types.ts
173
173
  var KEYBOARD_SHORTCUT_VARIANTS = {
174
+ /** Outlined keys with a subtle border — use on dark backgrounds. */
174
175
  OUTLINED: "outlined",
176
+ /** Filled keys with a solid background — use for emphasis or light backgrounds. */
175
177
  FILLED: "filled"
176
178
  };
177
179
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/keyboard-shortcut/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/keyboard-shortcut/keyboard-shortcut-styles.ts","../src/tokens/colors.ts","../src/components/keyboard-shortcut/types.ts","../src/components/keyboard-shortcut/keyboard-shortcut.tsx","../src/components/keyboard-shortcut/icons/icon-ctrl.tsx"],"sourcesContent":["export { KeyboardShortcut } from \"./keyboard-shortcut\";\nexport { IconCtrl } from \"./icons/icon-ctrl\";\nexport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nexport type { KeyboardShortcutProps, KeyIcon, KeyboardShortcutVariant } from \"./types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n ref\n) {\n return (\n <IconWrapper\n ref={ref}\n className={className}\n $color={color}\n aria-label={ariaLabel}\n role={ariaLabel ? \"img\" : undefined}\n >\n <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n </IconWrapper>\n );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n 12: 1.4,\n 14: 1.4,\n 16: 1.8,\n 18: 1.8,\n 20: 1.8,\n 24: 1.8,\n};\n\nexport const DEFAULT_STROKE_WIDTH = 1.8;\n\nexport function getStrokeWidth(size: number): number {\n return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;\n}\n\nexport const IconWrapper = styled.span<{ $color?: string }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: ${({ $color }) => $color ?? \"currentColor\"};\n flex-shrink: 0;\n`;\n","import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutVariant } from \"./types\";\n\nconst variantStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n border: 1px solid ${colors[\"white-alpha-40\"]};\n color: ${colors[\"brown-10\"]};\n `,\n [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n background: ${colors[\"brown-80\"]};\n color: ${colors[\"brown-10\"]};\n `,\n};\n\nexport const Wrapper = styled.div`\n display: inline-flex;\n align-items: center;\n gap: 2px;\n`;\n\nexport const Key = styled.kbd<{ $variant: KeyboardShortcutVariant }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n border-radius: 6px;\n ${({ $variant }) => variantStyles[$variant]};\n`;\n","export const colors = {\n // White\n white: \"#FFFFFF\",\n \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n // Brown\n \"brown-10\": \"#FAF9F8\",\n \"brown-20\": \"#F5F3F0\",\n \"brown-30\": \"#EEEBE5\",\n \"brown-40\": \"#E6E2DA\",\n \"brown-50\": \"#CFCBC4\",\n \"brown-60\": \"#A19E99\",\n \"brown-70\": \"#73716D\",\n \"brown-80\": \"#5C5A57\",\n \"brown-90\": \"#2E2D2C\",\n \"brown-100\": \"#171716\",\n \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n // Fuchsia\n \"fuchsia-50\": \"#FAF5FF\",\n \"fuchsia-300\": \"#F0ABFC\",\n \"fuchsia-500\": \"#D946EF\",\n \"fuchsia-600\": \"#C026D3\",\n \"fuchsia-800\": \"#86198F\",\n\n // Pink\n \"pink-50\": \"#FDF2F8\",\n \"pink-400\": \"#F472B6\",\n \"pink-600\": \"#DB2777\",\n \"pink-800\": \"#9D174D\",\n\n // Violet\n \"violet-50\": \"#F5F3FF\",\n \"violet-400\": \"#A78BFA\",\n \"violet-600\": \"#7C3AED\",\n \"violet-800\": \"#5B21B6\",\n\n // Indigo\n \"indigo-50\": \"#EEF2FF\",\n \"indigo-400\": \"#818CF8\",\n \"indigo-500\": \"#6366F1\",\n \"indigo-600\": \"#4F46E5\",\n \"indigo-800\": \"#3730A3\",\n\n // Cyan\n \"cyan-50\": \"#E7FEFF\",\n \"cyan-300\": \"#67E8F9\",\n \"cyan-600\": \"#0891B2\",\n \"cyan-900\": \"#164E63\",\n\n // Teal\n \"teal-50\": \"#EBFDF9\",\n \"teal-300\": \"#5EEAD4\",\n \"teal-600\": \"#0D9488\",\n\n // Rose\n \"rose-400\": \"#FB7185\",\n\n // Purple\n \"purple-400\": \"#C084FC\",\n\n // Blue\n \"blue-50\": \"#EFF6FF\",\n \"blue-100\": \"#DBEAFE\",\n \"blue-300\": \"#93C5FD\",\n \"blue-400\": \"#60A5FA\",\n \"blue-600\": \"#2563EB\",\n \"blue-800\": \"#1E40AF\",\n\n // Sky\n \"sky-300\": \"#7DD3FC\",\n\n // Green\n \"green-50\": \"#ECF9F0\",\n \"green-100\": \"#D4F1D9\",\n \"green-400\": \"#3DC269\",\n \"green-700\": \"#277C43\",\n \"green-800\": \"#1C5930\",\n\n // Orange\n \"orange-50\": \"#FFF7ED\",\n \"orange-100\": \"#FFEDD5\",\n \"orange-200\": \"#FED7AA\",\n \"orange-500\": \"#F97316\",\n \"orange-600\": \"#EA580C\",\n\n // Red\n \"red-50\": \"#FEF2F2\",\n \"red-100\": \"#FEE2E2\",\n \"red-200\": \"#FECACA\",\n \"red-400\": \"#F7776C\",\n \"red-500\": \"#EF4444\",\n \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n","import type { ComponentType, SVGProps } from \"react\";\n\nexport type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\nexport const KEYBOARD_SHORTCUT_VARIANTS = {\n OUTLINED: \"outlined\",\n FILLED: \"filled\",\n} as const;\n\nexport type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];\n\nexport interface KeyboardShortcutProps {\n keys: KeyIcon[];\n variant?: KeyboardShortcutVariant;\n className?: string;\n}\n","import type { ReactElement } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Key, Wrapper } from \"./keyboard-shortcut-styles\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutProps } from \"./types\";\n\nexport function KeyboardShortcut({\n keys,\n variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,\n className,\n}: KeyboardShortcutProps): ReactElement {\n return (\n <Wrapper className={className}>\n {keys.map((KeyComponent, index) => (\n <Key key={index} $variant={variant}>\n <Icon icon={KeyComponent} size={12} />\n </Key>\n ))}\n </Wrapper>\n );\n}\n","import type { ReactElement, SVGProps } from \"react\";\n\nexport function IconCtrl(props: SVGProps<SVGSVGElement>): ReactElement {\n const { width = 24, height = 24, ...rest } = props;\n\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width={width} height={height} fill=\"none\" {...rest}>\n <text\n x=\"50%\"\n y=\"50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n fill=\"currentColor\"\n fontFamily=\"Geist, sans-serif\"\n fontWeight={300}\n fontSize={14}\n >\n Ctrl\n </text>\n </svg>\n );\n}\n"],"mappings":"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","names":["styled","Icon","import_styled_components","styled","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../src/components/keyboard-shortcut/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/keyboard-shortcut/keyboard-shortcut-styles.ts","../src/tokens/colors.ts","../src/components/keyboard-shortcut/types.ts","../src/components/keyboard-shortcut/keyboard-shortcut.tsx","../src/components/keyboard-shortcut/icons/icon-ctrl.tsx"],"sourcesContent":["export { KeyboardShortcut } from \"./keyboard-shortcut\";\nexport { IconCtrl } from \"./icons/icon-ctrl\";\nexport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nexport type { KeyboardShortcutProps, KeyIcon, KeyboardShortcutVariant } from \"./types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n ref\n) {\n return (\n <IconWrapper\n ref={ref}\n className={className}\n $color={color}\n aria-label={ariaLabel}\n role={ariaLabel ? \"img\" : undefined}\n >\n <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n </IconWrapper>\n );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n 12: 1.4,\n 14: 1.4,\n 16: 1.8,\n 18: 1.8,\n 20: 1.8,\n 24: 1.8,\n};\n\nexport const DEFAULT_STROKE_WIDTH = 1.8;\n\nexport function getStrokeWidth(size: number): number {\n return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;\n}\n\nexport const IconWrapper = styled.span<{ $color?: string }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: ${({ $color }) => $color ?? \"currentColor\"};\n flex-shrink: 0;\n`;\n","import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutVariant } from \"./types\";\n\nconst variantStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n border: 1px solid ${colors[\"white-alpha-40\"]};\n color: ${colors[\"brown-10\"]};\n `,\n [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n background: ${colors[\"brown-80\"]};\n color: ${colors[\"brown-10\"]};\n `,\n};\n\nexport const Wrapper = styled.div`\n display: inline-flex;\n align-items: center;\n gap: 2px;\n`;\n\nexport const Key = styled.kbd<{ $variant: KeyboardShortcutVariant }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n border-radius: 6px;\n ${({ $variant }) => variantStyles[$variant]};\n`;\n","export const colors = {\n // White\n white: \"#FFFFFF\",\n \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n // Brown\n \"brown-10\": \"#FAF9F8\",\n \"brown-20\": \"#F5F3F0\",\n \"brown-30\": \"#EEEBE5\",\n \"brown-40\": \"#E6E2DA\",\n \"brown-50\": \"#CFCBC4\",\n \"brown-60\": \"#A19E99\",\n \"brown-70\": \"#73716D\",\n \"brown-80\": \"#5C5A57\",\n \"brown-90\": \"#2E2D2C\",\n \"brown-100\": \"#171716\",\n \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n // Fuchsia\n \"fuchsia-50\": \"#FAF5FF\",\n \"fuchsia-300\": \"#F0ABFC\",\n \"fuchsia-500\": \"#D946EF\",\n \"fuchsia-600\": \"#C026D3\",\n \"fuchsia-800\": \"#86198F\",\n\n // Pink\n \"pink-50\": \"#FDF2F8\",\n \"pink-400\": \"#F472B6\",\n \"pink-600\": \"#DB2777\",\n \"pink-800\": \"#9D174D\",\n\n // Violet\n \"violet-50\": \"#F5F3FF\",\n \"violet-400\": \"#A78BFA\",\n \"violet-600\": \"#7C3AED\",\n \"violet-800\": \"#5B21B6\",\n\n // Indigo\n \"indigo-50\": \"#EEF2FF\",\n \"indigo-400\": \"#818CF8\",\n \"indigo-500\": \"#6366F1\",\n \"indigo-600\": \"#4F46E5\",\n \"indigo-800\": \"#3730A3\",\n\n // Cyan\n \"cyan-50\": \"#E7FEFF\",\n \"cyan-300\": \"#67E8F9\",\n \"cyan-600\": \"#0891B2\",\n \"cyan-900\": \"#164E63\",\n\n // Teal\n \"teal-50\": \"#EBFDF9\",\n \"teal-300\": \"#5EEAD4\",\n \"teal-600\": \"#0D9488\",\n\n // Rose\n \"rose-400\": \"#FB7185\",\n\n // Purple\n \"purple-400\": \"#C084FC\",\n\n // Blue\n \"blue-50\": \"#EFF6FF\",\n \"blue-100\": \"#DBEAFE\",\n \"blue-300\": \"#93C5FD\",\n \"blue-400\": \"#60A5FA\",\n \"blue-600\": \"#2563EB\",\n \"blue-800\": \"#1E40AF\",\n\n // Sky\n \"sky-300\": \"#7DD3FC\",\n\n // Green\n \"green-50\": \"#ECF9F0\",\n \"green-100\": \"#D4F1D9\",\n \"green-400\": \"#3DC269\",\n \"green-700\": \"#277C43\",\n \"green-800\": \"#1C5930\",\n\n // Orange\n \"orange-50\": \"#FFF7ED\",\n \"orange-100\": \"#FFEDD5\",\n \"orange-200\": \"#FED7AA\",\n \"orange-500\": \"#F97316\",\n \"orange-600\": \"#EA580C\",\n\n // Red\n \"red-50\": \"#FEF2F2\",\n \"red-100\": \"#FEE2E2\",\n \"red-200\": \"#FECACA\",\n \"red-400\": \"#F7776C\",\n \"red-500\": \"#EF4444\",\n \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n","import type { ComponentType, SVGProps } from \"react\";\n\n/** An SVG icon component representing a single keyboard key (e.g., Cmd, Shift, a letter). */\nexport type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\n/** Available visual variants for the keyboard shortcut display. */\nexport const KEYBOARD_SHORTCUT_VARIANTS = {\n /** Outlined keys with a subtle border — use on dark backgrounds. */\n OUTLINED: \"outlined\",\n /** Filled keys with a solid background — use for emphasis or light backgrounds. */\n FILLED: \"filled\",\n} as const;\n\n/** Visual variant for the KeyboardShortcut component. */\nexport type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];\n\n/** Props for the KeyboardShortcut display component. */\nexport interface KeyboardShortcutProps {\n /** Ordered array of key icon components representing the shortcut (e.g., `[IconCommand, IconLetterK]` for ⌘K). */\n keys: KeyIcon[];\n /** Visual style variant. @default \"outlined\" */\n variant?: KeyboardShortcutVariant;\n /** Additional CSS class name. */\n className?: string;\n}\n","import type { ReactElement } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Key, Wrapper } from \"./keyboard-shortcut-styles\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutProps } from \"./types\";\n\nexport function KeyboardShortcut({\n keys,\n variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,\n className,\n}: KeyboardShortcutProps): ReactElement {\n return (\n <Wrapper className={className}>\n {keys.map((KeyComponent, index) => (\n <Key key={index} $variant={variant}>\n <Icon icon={KeyComponent} size={12} />\n </Key>\n ))}\n </Wrapper>\n );\n}\n","import type { ReactElement, SVGProps } from \"react\";\n\nexport function IconCtrl(props: SVGProps<SVGSVGElement>): ReactElement {\n const { width = 24, height = 24, ...rest } = props;\n\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width={width} height={height} fill=\"none\" {...rest}>\n <text\n x=\"50%\"\n y=\"50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n fill=\"currentColor\"\n fontFamily=\"Geist, sans-serif\"\n fontWeight={300}\n fontSize={14}\n >\n Ctrl\n </text>\n </svg>\n );\n}\n"],"mappings":"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","names":["styled","Icon","import_styled_components","styled","import_jsx_runtime","import_jsx_runtime"]}
@@ -1,14 +1,23 @@
1
1
  import { ComponentType, SVGProps, ReactElement } from 'react';
2
2
 
3
+ /** An SVG icon component representing a single keyboard key (e.g., Cmd, Shift, a letter). */
3
4
  type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;
5
+ /** Available visual variants for the keyboard shortcut display. */
4
6
  declare const KEYBOARD_SHORTCUT_VARIANTS: {
7
+ /** Outlined keys with a subtle border — use on dark backgrounds. */
5
8
  readonly OUTLINED: "outlined";
9
+ /** Filled keys with a solid background — use for emphasis or light backgrounds. */
6
10
  readonly FILLED: "filled";
7
11
  };
12
+ /** Visual variant for the KeyboardShortcut component. */
8
13
  type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];
14
+ /** Props for the KeyboardShortcut display component. */
9
15
  interface KeyboardShortcutProps {
16
+ /** Ordered array of key icon components representing the shortcut (e.g., `[IconCommand, IconLetterK]` for ⌘K). */
10
17
  keys: KeyIcon[];
18
+ /** Visual style variant. @default "outlined" */
11
19
  variant?: KeyboardShortcutVariant;
20
+ /** Additional CSS class name. */
12
21
  className?: string;
13
22
  }
14
23
 
@@ -1,14 +1,23 @@
1
1
  import { ComponentType, SVGProps, ReactElement } from 'react';
2
2
 
3
+ /** An SVG icon component representing a single keyboard key (e.g., Cmd, Shift, a letter). */
3
4
  type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;
5
+ /** Available visual variants for the keyboard shortcut display. */
4
6
  declare const KEYBOARD_SHORTCUT_VARIANTS: {
7
+ /** Outlined keys with a subtle border — use on dark backgrounds. */
5
8
  readonly OUTLINED: "outlined";
9
+ /** Filled keys with a solid background — use for emphasis or light backgrounds. */
6
10
  readonly FILLED: "filled";
7
11
  };
12
+ /** Visual variant for the KeyboardShortcut component. */
8
13
  type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];
14
+ /** Props for the KeyboardShortcut display component. */
9
15
  interface KeyboardShortcutProps {
16
+ /** Ordered array of key icon components representing the shortcut (e.g., `[IconCommand, IconLetterK]` for ⌘K). */
10
17
  keys: KeyIcon[];
18
+ /** Visual style variant. @default "outlined" */
11
19
  variant?: KeyboardShortcutVariant;
20
+ /** Additional CSS class name. */
12
21
  className?: string;
13
22
  }
14
23
 
@@ -2,7 +2,7 @@ import {
2
2
  IconCtrl,
3
3
  KEYBOARD_SHORTCUT_VARIANTS,
4
4
  KeyboardShortcut
5
- } from "./chunk-WZHNMC6P.js";
5
+ } from "./chunk-L6DUGB2E.js";
6
6
  import "./chunk-OLJIJYB5.js";
7
7
  import "./chunk-JF3P66JF.js";
8
8
  import "./chunk-5WRI5ZAA.js";
package/dist/lottie.d.cts CHANGED
@@ -1,35 +1,61 @@
1
1
  import * as react from 'react';
2
2
  import { AnimationItem } from 'lottie-web';
3
3
 
4
+ /** JSON animation data exported from After Effects via the Bodymovin plugin. */
4
5
  type LottieAnimationData = Record<string, unknown>;
6
+ /** Props for the Lottie animation component. */
5
7
  interface LottieProps {
8
+ /** Lottie JSON animation data object. */
6
9
  animationData: LottieAnimationData;
10
+ /** Whether the animation plays immediately on mount. @default true */
7
11
  autoplay?: boolean;
12
+ /** `true` to loop forever, a number to loop N times, `false` to play once. @default false */
8
13
  loop?: boolean | number;
14
+ /** Playback speed multiplier (e.g., 2 = double speed). @default 1 */
9
15
  speed?: number;
16
+ /** Playback direction: `1` = forward, `-1` = reverse. @default 1 */
10
17
  direction?: 1 | -1;
18
+ /** Container width. Accepts CSS values (e.g., `"100%"`) or a number in pixels. */
11
19
  width?: string | number;
20
+ /** Container height. Accepts CSS values or a number in pixels. */
12
21
  height?: string | number;
22
+ /** Additional CSS class name for the container element. */
13
23
  className?: string;
24
+ /** Play the animation only while the user hovers over the container. Pauses on mouse leave. */
14
25
  playOnHover?: boolean;
26
+ /** Loop the animation while hovering; play once then stop on mouse leave. */
15
27
  loopOnHover?: boolean;
28
+ /** Accessible label for the animation. */
16
29
  "aria-label"?: string;
30
+ /** Called once the lottie-web AnimationItem has loaded and is ready. */
17
31
  onAnimationLoaded?: (animation: AnimationItem) => void;
32
+ /** Fires when a non-looping animation reaches its last frame. */
18
33
  onComplete?: () => void;
34
+ /** Fires at the end of each loop iteration. */
19
35
  onLoopComplete?: () => void;
36
+ /** Fires on every animation frame with the current and total time. */
20
37
  onEnterFrame?: (frame: {
21
38
  currentTime: number;
22
39
  totalTime: number;
23
40
  }) => void;
24
41
  }
42
+ /** Imperative handle exposed via `ref` on the Lottie component. */
25
43
  interface LottieRef {
44
+ /** Start or resume playback. */
26
45
  play(): void;
46
+ /** Pause playback at the current frame. */
27
47
  pause(): void;
48
+ /** Stop playback and reset to the first frame. */
28
49
  stop(): void;
50
+ /** Jump to a specific point and start playing. @param value — frame number or time (seconds) depending on `isFrame`. */
29
51
  goToAndPlay(value: number, isFrame?: boolean): void;
52
+ /** Jump to a specific point and pause. @param value — frame number or time (seconds) depending on `isFrame`. */
30
53
  goToAndStop(value: number, isFrame?: boolean): void;
54
+ /** Set playback direction: `1` = forward, `-1` = reverse. */
31
55
  setDirection(direction: 1 | -1): void;
56
+ /** Set playback speed multiplier. */
32
57
  setSpeed(speed: number): void;
58
+ /** Access the underlying lottie-web AnimationItem, or `null` if not yet loaded. */
33
59
  getAnimationItem(): AnimationItem | null;
34
60
  }
35
61
 
package/dist/lottie.d.ts CHANGED
@@ -1,35 +1,61 @@
1
1
  import * as react from 'react';
2
2
  import { AnimationItem } from 'lottie-web';
3
3
 
4
+ /** JSON animation data exported from After Effects via the Bodymovin plugin. */
4
5
  type LottieAnimationData = Record<string, unknown>;
6
+ /** Props for the Lottie animation component. */
5
7
  interface LottieProps {
8
+ /** Lottie JSON animation data object. */
6
9
  animationData: LottieAnimationData;
10
+ /** Whether the animation plays immediately on mount. @default true */
7
11
  autoplay?: boolean;
12
+ /** `true` to loop forever, a number to loop N times, `false` to play once. @default false */
8
13
  loop?: boolean | number;
14
+ /** Playback speed multiplier (e.g., 2 = double speed). @default 1 */
9
15
  speed?: number;
16
+ /** Playback direction: `1` = forward, `-1` = reverse. @default 1 */
10
17
  direction?: 1 | -1;
18
+ /** Container width. Accepts CSS values (e.g., `"100%"`) or a number in pixels. */
11
19
  width?: string | number;
20
+ /** Container height. Accepts CSS values or a number in pixels. */
12
21
  height?: string | number;
22
+ /** Additional CSS class name for the container element. */
13
23
  className?: string;
24
+ /** Play the animation only while the user hovers over the container. Pauses on mouse leave. */
14
25
  playOnHover?: boolean;
26
+ /** Loop the animation while hovering; play once then stop on mouse leave. */
15
27
  loopOnHover?: boolean;
28
+ /** Accessible label for the animation. */
16
29
  "aria-label"?: string;
30
+ /** Called once the lottie-web AnimationItem has loaded and is ready. */
17
31
  onAnimationLoaded?: (animation: AnimationItem) => void;
32
+ /** Fires when a non-looping animation reaches its last frame. */
18
33
  onComplete?: () => void;
34
+ /** Fires at the end of each loop iteration. */
19
35
  onLoopComplete?: () => void;
36
+ /** Fires on every animation frame with the current and total time. */
20
37
  onEnterFrame?: (frame: {
21
38
  currentTime: number;
22
39
  totalTime: number;
23
40
  }) => void;
24
41
  }
42
+ /** Imperative handle exposed via `ref` on the Lottie component. */
25
43
  interface LottieRef {
44
+ /** Start or resume playback. */
26
45
  play(): void;
46
+ /** Pause playback at the current frame. */
27
47
  pause(): void;
48
+ /** Stop playback and reset to the first frame. */
28
49
  stop(): void;
50
+ /** Jump to a specific point and start playing. @param value — frame number or time (seconds) depending on `isFrame`. */
29
51
  goToAndPlay(value: number, isFrame?: boolean): void;
52
+ /** Jump to a specific point and pause. @param value — frame number or time (seconds) depending on `isFrame`. */
30
53
  goToAndStop(value: number, isFrame?: boolean): void;
54
+ /** Set playback direction: `1` = forward, `-1` = reverse. */
31
55
  setDirection(direction: 1 | -1): void;
56
+ /** Set playback speed multiplier. */
32
57
  setSpeed(speed: number): void;
58
+ /** Access the underlying lottie-web AnimationItem, or `null` if not yet loaded. */
33
59
  getAnimationItem(): AnimationItem | null;
34
60
  }
35
61
 
@@ -143,7 +143,9 @@ var colors = {
143
143
 
144
144
  // src/tokens/typography.ts
145
145
  var fontFamilies = {
146
+ /** Geist — primary UI font for body text, labels, headings, and display. */
146
147
  GEIST: "Geist",
148
+ /** Crimson Pro — editorial/serif font, always italic. Used for decorative headings and pull quotes. */
147
149
  CRIMSON_PRO: "Crimson Pro"
148
150
  };
149
151
  var typographyTypes = {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/text-area/index.ts","../src/components/text-area/text-area.tsx","../src/utils/merge-refs.ts","../src/components/text-area/text-area-styles.ts","../src/tokens/colors.ts","../src/tokens/typography.ts"],"sourcesContent":["export { TextArea } from \"./text-area\";\nexport type { TextAreaProps } from \"./types\";\n","import { forwardRef, useCallback, useLayoutEffect, useRef, type ChangeEvent } from \"react\";\n\nimport { mergeRefs } from \"@/utils/merge-refs\";\nimport { StyledTextArea } from \"./text-area-styles\";\nimport type { TextAreaProps } from \"./types\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n { value, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className },\n externalRef\n) {\n const internalRef = useRef<HTMLTextAreaElement>(null);\n\n // Auto-resize: recalculates height whenever value changes so the textarea\n // grows/shrinks to fit its content (also restores correct height when the\n // component re-mounts or becomes visible again after being hidden).\n useLayoutEffect(() => {\n const el = internalRef.current;\n if (el) {\n el.style.height = \"auto\";\n el.style.height = `${el.scrollHeight}px`;\n }\n }, [value]);\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n onChange(e.target.value);\n },\n [onChange]\n );\n\n return (\n <StyledTextArea\n ref={mergeRefs(internalRef, externalRef)}\n value={value}\n onChange={handleChange}\n placeholder={placeholder}\n $maxHeight={maxHeight}\n rows={rows}\n autoFocus={autoFocus}\n onKeyDown={onKeyDown}\n disabled={disabled}\n className={className}\n />\n );\n});\n","import type { Ref } from \"react\";\n\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void {\n return (node) => {\n for (const ref of refs) {\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<T | null>).current = node;\n }\n }\n };\n}\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../../tokens/typography\";\n\nexport const StyledTextArea = styled.textarea<{ $maxHeight?: number }>`\n ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};\n color: ${colors[\"brown-100\"]};\n border: none;\n outline: none;\n resize: none;\n width: 100%;\n background: transparent;\n vertical-align: bottom;\n max-height: ${({ $maxHeight }) => ($maxHeight ? `${$maxHeight}px` : \"none\")};\n overflow-y: ${({ $maxHeight }) => ($maxHeight ? \"auto\" : \"hidden\")};\n\n &::placeholder {\n color: ${colors[\"brown-50\"]};\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n`;\n","export const colors = {\n // White\n white: \"#FFFFFF\",\n \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n // Brown\n \"brown-10\": \"#FAF9F8\",\n \"brown-20\": \"#F5F3F0\",\n \"brown-30\": \"#EEEBE5\",\n \"brown-40\": \"#E6E2DA\",\n \"brown-50\": \"#CFCBC4\",\n \"brown-60\": \"#A19E99\",\n \"brown-70\": \"#73716D\",\n \"brown-80\": \"#5C5A57\",\n \"brown-90\": \"#2E2D2C\",\n \"brown-100\": \"#171716\",\n \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n // Fuchsia\n \"fuchsia-50\": \"#FAF5FF\",\n \"fuchsia-300\": \"#F0ABFC\",\n \"fuchsia-500\": \"#D946EF\",\n \"fuchsia-600\": \"#C026D3\",\n \"fuchsia-800\": \"#86198F\",\n\n // Pink\n \"pink-50\": \"#FDF2F8\",\n \"pink-400\": \"#F472B6\",\n \"pink-600\": \"#DB2777\",\n \"pink-800\": \"#9D174D\",\n\n // Violet\n \"violet-50\": \"#F5F3FF\",\n \"violet-400\": \"#A78BFA\",\n \"violet-600\": \"#7C3AED\",\n \"violet-800\": \"#5B21B6\",\n\n // Indigo\n \"indigo-50\": \"#EEF2FF\",\n \"indigo-400\": \"#818CF8\",\n \"indigo-500\": \"#6366F1\",\n \"indigo-600\": \"#4F46E5\",\n \"indigo-800\": \"#3730A3\",\n\n // Cyan\n \"cyan-50\": \"#E7FEFF\",\n \"cyan-300\": \"#67E8F9\",\n \"cyan-600\": \"#0891B2\",\n \"cyan-900\": \"#164E63\",\n\n // Teal\n \"teal-50\": \"#EBFDF9\",\n \"teal-300\": \"#5EEAD4\",\n \"teal-600\": \"#0D9488\",\n\n // Rose\n \"rose-400\": \"#FB7185\",\n\n // Purple\n \"purple-400\": \"#C084FC\",\n\n // Blue\n \"blue-50\": \"#EFF6FF\",\n \"blue-100\": \"#DBEAFE\",\n \"blue-300\": \"#93C5FD\",\n \"blue-400\": \"#60A5FA\",\n \"blue-600\": \"#2563EB\",\n \"blue-800\": \"#1E40AF\",\n\n // Sky\n \"sky-300\": \"#7DD3FC\",\n\n // Green\n \"green-50\": \"#ECF9F0\",\n \"green-100\": \"#D4F1D9\",\n \"green-400\": \"#3DC269\",\n \"green-700\": \"#277C43\",\n \"green-800\": \"#1C5930\",\n\n // Orange\n \"orange-50\": \"#FFF7ED\",\n \"orange-100\": \"#FFEDD5\",\n \"orange-200\": \"#FED7AA\",\n \"orange-500\": \"#F97316\",\n \"orange-600\": \"#EA580C\",\n\n // Red\n \"red-50\": \"#FEF2F2\",\n \"red-100\": \"#FEE2E2\",\n \"red-200\": \"#FECACA\",\n \"red-400\": \"#F7776C\",\n \"red-500\": \"#EF4444\",\n \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n","export const fontFamilies = {\n GEIST: \"Geist\",\n CRIMSON_PRO: \"Crimson Pro\",\n} as const;\n\nexport const typographyTypes = {\n // Geist Label Caption (12px)\n GEIST_LABEL_CAPTION_REGULAR: \"GEIST_LABEL_CAPTION_REGULAR\",\n GEIST_LABEL_CAPTION_MEDIUM: \"GEIST_LABEL_CAPTION_MEDIUM\",\n GEIST_LABEL_CAPTION_SEMI_BOLD: \"GEIST_LABEL_CAPTION_SEMI_BOLD\",\n\n // Geist Body Extra Small (14px)\n GEIST_BODY_XS_REGULAR: \"GEIST_BODY_XS_REGULAR\",\n GEIST_BODY_XS_MEDIUM: \"GEIST_BODY_XS_MEDIUM\",\n GEIST_BODY_XS_BOLD: \"GEIST_BODY_XS_BOLD\",\n\n // Geist Body Small (16px)\n GEIST_BODY_S_REGULAR: \"GEIST_BODY_S_REGULAR\",\n GEIST_BODY_S_MEDIUM: \"GEIST_BODY_S_MEDIUM\",\n GEIST_BODY_S_SEMI_BOLD: \"GEIST_BODY_S_SEMI_BOLD\",\n GEIST_BODY_S_BOLD: \"GEIST_BODY_S_BOLD\",\n\n // Geist Body Medium (18px)\n GEIST_BODY_M_LIGHT: \"GEIST_BODY_M_LIGHT\",\n GEIST_BODY_M_REGULAR: \"GEIST_BODY_M_REGULAR\",\n GEIST_BODY_M_MEDIUM: \"GEIST_BODY_M_MEDIUM\",\n GEIST_BODY_M_SEMI_BOLD: \"GEIST_BODY_M_SEMI_BOLD\",\n\n // Geist Body Large (20px)\n GEIST_BODY_L_REGULAR: \"GEIST_BODY_L_REGULAR\",\n GEIST_BODY_L_MEDIUM: \"GEIST_BODY_L_MEDIUM\",\n GEIST_BODY_L_SEMI_BOLD: \"GEIST_BODY_L_SEMI_BOLD\",\n GEIST_BODY_L_BOLD: \"GEIST_BODY_L_BOLD\",\n\n // Geist Heading Small (24px)\n GEIST_HEADING_S_REGULAR: \"GEIST_HEADING_S_REGULAR\",\n GEIST_HEADING_S_MEDIUM: \"GEIST_HEADING_S_MEDIUM\",\n GEIST_HEADING_S_BOLD: \"GEIST_HEADING_S_BOLD\",\n\n // Geist Heading Medium (28px)\n GEIST_HEADING_M_BOLD: \"GEIST_HEADING_M_BOLD\",\n\n // Geist Heading Large (32px)\n GEIST_HEADING_L_REGULAR: \"GEIST_HEADING_L_REGULAR\",\n GEIST_HEADING_L_MEDIUM: \"GEIST_HEADING_L_MEDIUM\",\n GEIST_HEADING_L_SEMI_BOLD: \"GEIST_HEADING_L_SEMI_BOLD\",\n GEIST_HEADING_L_BOLD: \"GEIST_HEADING_L_BOLD\",\n\n // Geist Display Large (36px)\n GEIST_DISPLAY_L_MEDIUM: \"GEIST_DISPLAY_L_MEDIUM\",\n\n // Crimson Pro Body Small (16px)\n CRIMSON_PRO_BODY_S_LIGHT: \"CRIMSON_PRO_BODY_S_LIGHT\",\n\n // Crimson Pro Body Medium (18px)\n CRIMSON_PRO_BODY_M_LIGHT: \"CRIMSON_PRO_BODY_M_LIGHT\",\n\n // Crimson Pro Heading Medium (24px)\n CRIMSON_PRO_HEADING_M_MEDIUM: \"CRIMSON_PRO_HEADING_M_MEDIUM\",\n\n // Crimson Pro Display Extra Large (46px)\n CRIMSON_PRO_DISPLAY_XL_REGULAR: \"CRIMSON_PRO_DISPLAY_XL_REGULAR\",\n} as const;\n\nexport type TypographyType = (typeof typographyTypes)[keyof typeof typographyTypes];\n\nexport interface TypographyStyle {\n fontFamily: string;\n fontSize: number;\n fontWeight: number;\n lineHeight: number;\n letterSpacing?: number;\n fontStyle?: string;\n}\n\nexport const typographyStyles: Record<TypographyType, TypographyStyle> = {\n // Geist Label Caption (12px)\n [typographyTypes.GEIST_LABEL_CAPTION_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 12,\n fontWeight: 400,\n lineHeight: 16,\n },\n [typographyTypes.GEIST_LABEL_CAPTION_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 12,\n fontWeight: 500,\n lineHeight: 16,\n },\n [typographyTypes.GEIST_LABEL_CAPTION_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 12,\n fontWeight: 600,\n lineHeight: 16,\n },\n\n // Geist Body Extra Small (14px)\n [typographyTypes.GEIST_BODY_XS_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 14,\n fontWeight: 400,\n lineHeight: 20,\n },\n [typographyTypes.GEIST_BODY_XS_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 14,\n fontWeight: 500,\n lineHeight: 20,\n },\n [typographyTypes.GEIST_BODY_XS_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 14,\n fontWeight: 600,\n lineHeight: 20,\n },\n\n // Geist Body Small (16px)\n [typographyTypes.GEIST_BODY_S_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 400,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n [typographyTypes.GEIST_BODY_S_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 500,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n [typographyTypes.GEIST_BODY_S_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 600,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n [typographyTypes.GEIST_BODY_S_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 700,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n\n // Geist Body Medium (18px)\n [typographyTypes.GEIST_BODY_M_LIGHT]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 300,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n [typographyTypes.GEIST_BODY_M_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 400,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n [typographyTypes.GEIST_BODY_M_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 500,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n [typographyTypes.GEIST_BODY_M_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 600,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n\n // Geist Body Large (20px)\n [typographyTypes.GEIST_BODY_L_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 400,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n [typographyTypes.GEIST_BODY_L_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 500,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n [typographyTypes.GEIST_BODY_L_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 600,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n [typographyTypes.GEIST_BODY_L_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 700,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n\n // Geist Heading Small (24px)\n [typographyTypes.GEIST_HEADING_S_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 24,\n fontWeight: 400,\n lineHeight: 32,\n letterSpacing: -0.48,\n },\n [typographyTypes.GEIST_HEADING_S_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 24,\n fontWeight: 500,\n lineHeight: 32,\n letterSpacing: -0.48,\n },\n [typographyTypes.GEIST_HEADING_S_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 24,\n fontWeight: 700,\n lineHeight: 32,\n letterSpacing: -0.48,\n },\n\n // Geist Heading Medium (28px)\n [typographyTypes.GEIST_HEADING_M_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 28,\n fontWeight: 700,\n lineHeight: 36,\n letterSpacing: -0.6,\n },\n\n // Geist Heading Large (32px)\n [typographyTypes.GEIST_HEADING_L_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 400,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n [typographyTypes.GEIST_HEADING_L_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 500,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n [typographyTypes.GEIST_HEADING_L_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 600,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n [typographyTypes.GEIST_HEADING_L_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 700,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n\n // Geist Display Large (36px)\n [typographyTypes.GEIST_DISPLAY_L_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 36,\n fontWeight: 500,\n lineHeight: 44,\n letterSpacing: -0.72,\n },\n\n // Crimson Pro Body Small (16px)\n [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 16,\n fontWeight: 300,\n lineHeight: 20,\n letterSpacing: -0.32,\n fontStyle: \"italic\",\n },\n\n // Crimson Pro Body Medium (18px)\n [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 18,\n fontWeight: 300,\n lineHeight: 28,\n letterSpacing: 0,\n fontStyle: \"italic\",\n },\n\n // Crimson Pro Heading Medium (24px)\n [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 24,\n fontWeight: 400,\n lineHeight: 32,\n letterSpacing: -0.48,\n fontStyle: \"italic\",\n },\n\n // Crimson Pro Display Extra Large (46px)\n [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 46,\n fontWeight: 400,\n lineHeight: 54,\n letterSpacing: -1.38,\n fontStyle: \"italic\",\n },\n};\n\nexport function typographyMixin(type: TypographyType): string {\n const style = typographyStyles[type];\n return [\n `font-family: \"${style.fontFamily}\", sans-serif`,\n `font-size: ${style.fontSize}px`,\n `font-weight: ${style.fontWeight}`,\n `line-height: ${style.lineHeight}px`,\n `letter-spacing: ${style.letterSpacing != null ? `${style.letterSpacing}px` : \"inherit\"}`,\n `font-style: ${style.fontStyle ?? \"normal\"}`,\n ].join(\";\\n \");\n}\n"],"mappings":"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","names":["styled","TextArea"]}
1
+ {"version":3,"sources":["../src/components/text-area/index.ts","../src/components/text-area/text-area.tsx","../src/utils/merge-refs.ts","../src/components/text-area/text-area-styles.ts","../src/tokens/colors.ts","../src/tokens/typography.ts"],"sourcesContent":["export { TextArea } from \"./text-area\";\nexport type { TextAreaProps } from \"./types\";\n","import { forwardRef, useCallback, useLayoutEffect, useRef, type ChangeEvent } from \"react\";\n\nimport { mergeRefs } from \"@/utils/merge-refs\";\nimport { StyledTextArea } from \"./text-area-styles\";\nimport type { TextAreaProps } from \"./types\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n { value, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className },\n externalRef\n) {\n const internalRef = useRef<HTMLTextAreaElement>(null);\n\n // Auto-resize: recalculates height whenever value changes so the textarea\n // grows/shrinks to fit its content (also restores correct height when the\n // component re-mounts or becomes visible again after being hidden).\n useLayoutEffect(() => {\n const el = internalRef.current;\n if (el) {\n el.style.height = \"auto\";\n el.style.height = `${el.scrollHeight}px`;\n }\n }, [value]);\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n onChange(e.target.value);\n },\n [onChange]\n );\n\n return (\n <StyledTextArea\n ref={mergeRefs(internalRef, externalRef)}\n value={value}\n onChange={handleChange}\n placeholder={placeholder}\n $maxHeight={maxHeight}\n rows={rows}\n autoFocus={autoFocus}\n onKeyDown={onKeyDown}\n disabled={disabled}\n className={className}\n />\n );\n});\n","import type { Ref } from \"react\";\n\n/**\n * Combines multiple React refs into a single callback ref.\n * Useful when a component needs to forward its ref while also keeping a local ref.\n *\n * @param refs - Any number of React refs (callback refs, RefObjects, or `undefined`).\n * @returns A callback ref that updates all provided refs when the DOM node changes.\n */\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void {\n return (node) => {\n for (const ref of refs) {\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<T | null>).current = node;\n }\n }\n };\n}\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../../tokens/typography\";\n\nexport const StyledTextArea = styled.textarea<{ $maxHeight?: number }>`\n ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};\n color: ${colors[\"brown-100\"]};\n border: none;\n outline: none;\n resize: none;\n width: 100%;\n background: transparent;\n vertical-align: bottom;\n max-height: ${({ $maxHeight }) => ($maxHeight ? `${$maxHeight}px` : \"none\")};\n overflow-y: ${({ $maxHeight }) => ($maxHeight ? \"auto\" : \"hidden\")};\n\n &::placeholder {\n color: ${colors[\"brown-50\"]};\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n`;\n","export const colors = {\n // White\n white: \"#FFFFFF\",\n \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n // Brown\n \"brown-10\": \"#FAF9F8\",\n \"brown-20\": \"#F5F3F0\",\n \"brown-30\": \"#EEEBE5\",\n \"brown-40\": \"#E6E2DA\",\n \"brown-50\": \"#CFCBC4\",\n \"brown-60\": \"#A19E99\",\n \"brown-70\": \"#73716D\",\n \"brown-80\": \"#5C5A57\",\n \"brown-90\": \"#2E2D2C\",\n \"brown-100\": \"#171716\",\n \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n // Fuchsia\n \"fuchsia-50\": \"#FAF5FF\",\n \"fuchsia-300\": \"#F0ABFC\",\n \"fuchsia-500\": \"#D946EF\",\n \"fuchsia-600\": \"#C026D3\",\n \"fuchsia-800\": \"#86198F\",\n\n // Pink\n \"pink-50\": \"#FDF2F8\",\n \"pink-400\": \"#F472B6\",\n \"pink-600\": \"#DB2777\",\n \"pink-800\": \"#9D174D\",\n\n // Violet\n \"violet-50\": \"#F5F3FF\",\n \"violet-400\": \"#A78BFA\",\n \"violet-600\": \"#7C3AED\",\n \"violet-800\": \"#5B21B6\",\n\n // Indigo\n \"indigo-50\": \"#EEF2FF\",\n \"indigo-400\": \"#818CF8\",\n \"indigo-500\": \"#6366F1\",\n \"indigo-600\": \"#4F46E5\",\n \"indigo-800\": \"#3730A3\",\n\n // Cyan\n \"cyan-50\": \"#E7FEFF\",\n \"cyan-300\": \"#67E8F9\",\n \"cyan-600\": \"#0891B2\",\n \"cyan-900\": \"#164E63\",\n\n // Teal\n \"teal-50\": \"#EBFDF9\",\n \"teal-300\": \"#5EEAD4\",\n \"teal-600\": \"#0D9488\",\n\n // Rose\n \"rose-400\": \"#FB7185\",\n\n // Purple\n \"purple-400\": \"#C084FC\",\n\n // Blue\n \"blue-50\": \"#EFF6FF\",\n \"blue-100\": \"#DBEAFE\",\n \"blue-300\": \"#93C5FD\",\n \"blue-400\": \"#60A5FA\",\n \"blue-600\": \"#2563EB\",\n \"blue-800\": \"#1E40AF\",\n\n // Sky\n \"sky-300\": \"#7DD3FC\",\n\n // Green\n \"green-50\": \"#ECF9F0\",\n \"green-100\": \"#D4F1D9\",\n \"green-400\": \"#3DC269\",\n \"green-700\": \"#277C43\",\n \"green-800\": \"#1C5930\",\n\n // Orange\n \"orange-50\": \"#FFF7ED\",\n \"orange-100\": \"#FFEDD5\",\n \"orange-200\": \"#FED7AA\",\n \"orange-500\": \"#F97316\",\n \"orange-600\": \"#EA580C\",\n\n // Red\n \"red-50\": \"#FEF2F2\",\n \"red-100\": \"#FEE2E2\",\n \"red-200\": \"#FECACA\",\n \"red-400\": \"#F7776C\",\n \"red-500\": \"#EF4444\",\n \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n","/** Available font families in the Shapes.co design system. */\nexport const fontFamilies = {\n /** Geist — primary UI font for body text, labels, headings, and display. */\n GEIST: \"Geist\",\n /** Crimson Pro — editorial/serif font, always italic. Used for decorative headings and pull quotes. */\n CRIMSON_PRO: \"Crimson Pro\",\n} as const;\n\nexport const typographyTypes = {\n // Geist Label Caption (12px)\n GEIST_LABEL_CAPTION_REGULAR: \"GEIST_LABEL_CAPTION_REGULAR\",\n GEIST_LABEL_CAPTION_MEDIUM: \"GEIST_LABEL_CAPTION_MEDIUM\",\n GEIST_LABEL_CAPTION_SEMI_BOLD: \"GEIST_LABEL_CAPTION_SEMI_BOLD\",\n\n // Geist Body Extra Small (14px)\n GEIST_BODY_XS_REGULAR: \"GEIST_BODY_XS_REGULAR\",\n GEIST_BODY_XS_MEDIUM: \"GEIST_BODY_XS_MEDIUM\",\n GEIST_BODY_XS_BOLD: \"GEIST_BODY_XS_BOLD\",\n\n // Geist Body Small (16px)\n GEIST_BODY_S_REGULAR: \"GEIST_BODY_S_REGULAR\",\n GEIST_BODY_S_MEDIUM: \"GEIST_BODY_S_MEDIUM\",\n GEIST_BODY_S_SEMI_BOLD: \"GEIST_BODY_S_SEMI_BOLD\",\n GEIST_BODY_S_BOLD: \"GEIST_BODY_S_BOLD\",\n\n // Geist Body Medium (18px)\n GEIST_BODY_M_LIGHT: \"GEIST_BODY_M_LIGHT\",\n GEIST_BODY_M_REGULAR: \"GEIST_BODY_M_REGULAR\",\n GEIST_BODY_M_MEDIUM: \"GEIST_BODY_M_MEDIUM\",\n GEIST_BODY_M_SEMI_BOLD: \"GEIST_BODY_M_SEMI_BOLD\",\n\n // Geist Body Large (20px)\n GEIST_BODY_L_REGULAR: \"GEIST_BODY_L_REGULAR\",\n GEIST_BODY_L_MEDIUM: \"GEIST_BODY_L_MEDIUM\",\n GEIST_BODY_L_SEMI_BOLD: \"GEIST_BODY_L_SEMI_BOLD\",\n GEIST_BODY_L_BOLD: \"GEIST_BODY_L_BOLD\",\n\n // Geist Heading Small (24px)\n GEIST_HEADING_S_REGULAR: \"GEIST_HEADING_S_REGULAR\",\n GEIST_HEADING_S_MEDIUM: \"GEIST_HEADING_S_MEDIUM\",\n GEIST_HEADING_S_BOLD: \"GEIST_HEADING_S_BOLD\",\n\n // Geist Heading Medium (28px)\n GEIST_HEADING_M_BOLD: \"GEIST_HEADING_M_BOLD\",\n\n // Geist Heading Large (32px)\n GEIST_HEADING_L_REGULAR: \"GEIST_HEADING_L_REGULAR\",\n GEIST_HEADING_L_MEDIUM: \"GEIST_HEADING_L_MEDIUM\",\n GEIST_HEADING_L_SEMI_BOLD: \"GEIST_HEADING_L_SEMI_BOLD\",\n GEIST_HEADING_L_BOLD: \"GEIST_HEADING_L_BOLD\",\n\n // Geist Display Large (36px)\n GEIST_DISPLAY_L_MEDIUM: \"GEIST_DISPLAY_L_MEDIUM\",\n\n // Crimson Pro Body Small (16px)\n CRIMSON_PRO_BODY_S_LIGHT: \"CRIMSON_PRO_BODY_S_LIGHT\",\n\n // Crimson Pro Body Medium (18px)\n CRIMSON_PRO_BODY_M_LIGHT: \"CRIMSON_PRO_BODY_M_LIGHT\",\n\n // Crimson Pro Heading Medium (24px)\n CRIMSON_PRO_HEADING_M_MEDIUM: \"CRIMSON_PRO_HEADING_M_MEDIUM\",\n\n // Crimson Pro Display Extra Large (46px)\n CRIMSON_PRO_DISPLAY_XL_REGULAR: \"CRIMSON_PRO_DISPLAY_XL_REGULAR\",\n} as const;\n\n/** Union of all typography type string constants. Used as keys into `typographyStyles`. */\nexport type TypographyType = (typeof typographyTypes)[keyof typeof typographyTypes];\n\n/** CSS properties for a single typography type. All numeric values are in pixels. */\nexport interface TypographyStyle {\n /** Font family name (e.g., \"Geist\"). */\n fontFamily: string;\n /** Font size in pixels. */\n fontSize: number;\n /** Font weight (100–900). */\n fontWeight: number;\n /** Line height in pixels. */\n lineHeight: number;\n /** Letter spacing in pixels. Omitted when the font's default spacing is correct. */\n letterSpacing?: number;\n /** CSS font-style value (e.g., \"italic\"). Omitted for normal style. */\n fontStyle?: string;\n}\n\nexport const typographyStyles: Record<TypographyType, TypographyStyle> = {\n // Geist Label Caption (12px)\n [typographyTypes.GEIST_LABEL_CAPTION_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 12,\n fontWeight: 400,\n lineHeight: 16,\n },\n [typographyTypes.GEIST_LABEL_CAPTION_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 12,\n fontWeight: 500,\n lineHeight: 16,\n },\n [typographyTypes.GEIST_LABEL_CAPTION_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 12,\n fontWeight: 600,\n lineHeight: 16,\n },\n\n // Geist Body Extra Small (14px)\n [typographyTypes.GEIST_BODY_XS_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 14,\n fontWeight: 400,\n lineHeight: 20,\n },\n [typographyTypes.GEIST_BODY_XS_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 14,\n fontWeight: 500,\n lineHeight: 20,\n },\n [typographyTypes.GEIST_BODY_XS_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 14,\n fontWeight: 600,\n lineHeight: 20,\n },\n\n // Geist Body Small (16px)\n [typographyTypes.GEIST_BODY_S_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 400,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n [typographyTypes.GEIST_BODY_S_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 500,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n [typographyTypes.GEIST_BODY_S_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 600,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n [typographyTypes.GEIST_BODY_S_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 700,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n\n // Geist Body Medium (18px)\n [typographyTypes.GEIST_BODY_M_LIGHT]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 300,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n [typographyTypes.GEIST_BODY_M_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 400,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n [typographyTypes.GEIST_BODY_M_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 500,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n [typographyTypes.GEIST_BODY_M_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 600,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n\n // Geist Body Large (20px)\n [typographyTypes.GEIST_BODY_L_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 400,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n [typographyTypes.GEIST_BODY_L_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 500,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n [typographyTypes.GEIST_BODY_L_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 600,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n [typographyTypes.GEIST_BODY_L_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 700,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n\n // Geist Heading Small (24px)\n [typographyTypes.GEIST_HEADING_S_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 24,\n fontWeight: 400,\n lineHeight: 32,\n letterSpacing: -0.48,\n },\n [typographyTypes.GEIST_HEADING_S_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 24,\n fontWeight: 500,\n lineHeight: 32,\n letterSpacing: -0.48,\n },\n [typographyTypes.GEIST_HEADING_S_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 24,\n fontWeight: 700,\n lineHeight: 32,\n letterSpacing: -0.48,\n },\n\n // Geist Heading Medium (28px)\n [typographyTypes.GEIST_HEADING_M_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 28,\n fontWeight: 700,\n lineHeight: 36,\n letterSpacing: -0.6,\n },\n\n // Geist Heading Large (32px)\n [typographyTypes.GEIST_HEADING_L_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 400,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n [typographyTypes.GEIST_HEADING_L_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 500,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n [typographyTypes.GEIST_HEADING_L_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 600,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n [typographyTypes.GEIST_HEADING_L_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 700,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n\n // Geist Display Large (36px)\n [typographyTypes.GEIST_DISPLAY_L_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 36,\n fontWeight: 500,\n lineHeight: 44,\n letterSpacing: -0.72,\n },\n\n // Crimson Pro Body Small (16px)\n [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 16,\n fontWeight: 300,\n lineHeight: 20,\n letterSpacing: -0.32,\n fontStyle: \"italic\",\n },\n\n // Crimson Pro Body Medium (18px)\n [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 18,\n fontWeight: 300,\n lineHeight: 28,\n letterSpacing: 0,\n fontStyle: \"italic\",\n },\n\n // Crimson Pro Heading Medium (24px)\n [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 24,\n fontWeight: 400,\n lineHeight: 32,\n letterSpacing: -0.48,\n fontStyle: \"italic\",\n },\n\n // Crimson Pro Display Extra Large (46px)\n [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 46,\n fontWeight: 400,\n lineHeight: 54,\n letterSpacing: -1.38,\n fontStyle: \"italic\",\n },\n};\n\n/**\n * Generates a CSS string for a given typography type, suitable for use in styled-components template literals.\n * @param type - The typography type constant (e.g., `typographyTypes.GEIST_BODY_S_REGULAR`).\n * @returns A semicolon-separated CSS string with font-family, font-size, font-weight, line-height, letter-spacing, and font-style.\n */\nexport function typographyMixin(type: TypographyType): string {\n const style = typographyStyles[type];\n return [\n `font-family: \"${style.fontFamily}\", sans-serif`,\n `font-size: ${style.fontSize}px`,\n `font-weight: ${style.fontWeight}`,\n `line-height: ${style.lineHeight}px`,\n `letter-spacing: ${style.letterSpacing != null ? `${style.letterSpacing}px` : \"inherit\"}`,\n `font-style: ${style.fontStyle ?? \"normal\"}`,\n ].join(\";\\n \");\n}\n"],"mappings":"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","names":["styled","TextArea"]}
@@ -1,15 +1,25 @@
1
1
  import * as react from 'react';
2
2
  import { KeyboardEventHandler } from 'react';
3
3
 
4
+ /** Props for the TextArea auto-resizing input component. */
4
5
  interface TextAreaProps {
6
+ /** Current text value (controlled). */
5
7
  value: string;
8
+ /** Called on every input change with the new text value. */
6
9
  onChange: (value: string) => void;
10
+ /** Placeholder text shown when the textarea is empty. */
7
11
  placeholder?: string;
12
+ /** Maximum height in pixels before the textarea scrolls instead of growing. */
8
13
  maxHeight?: number;
14
+ /** Initial number of visible text rows. @default 1 */
9
15
  rows?: number;
16
+ /** Whether to focus the textarea on mount. */
10
17
  autoFocus?: boolean;
18
+ /** Keyboard event handler — useful for intercepting Enter to send. */
11
19
  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
20
+ /** Whether the textarea is non-interactive. */
12
21
  disabled?: boolean;
22
+ /** Additional CSS class name. */
13
23
  className?: string;
14
24
  }
15
25
 
@@ -1,15 +1,25 @@
1
1
  import * as react from 'react';
2
2
  import { KeyboardEventHandler } from 'react';
3
3
 
4
+ /** Props for the TextArea auto-resizing input component. */
4
5
  interface TextAreaProps {
6
+ /** Current text value (controlled). */
5
7
  value: string;
8
+ /** Called on every input change with the new text value. */
6
9
  onChange: (value: string) => void;
10
+ /** Placeholder text shown when the textarea is empty. */
7
11
  placeholder?: string;
12
+ /** Maximum height in pixels before the textarea scrolls instead of growing. */
8
13
  maxHeight?: number;
14
+ /** Initial number of visible text rows. @default 1 */
9
15
  rows?: number;
16
+ /** Whether to focus the textarea on mount. */
10
17
  autoFocus?: boolean;
18
+ /** Keyboard event handler — useful for intercepting Enter to send. */
11
19
  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
20
+ /** Whether the textarea is non-interactive. */
12
21
  disabled?: boolean;
22
+ /** Additional CSS class name. */
13
23
  className?: string;
14
24
  }
15
25
 
package/dist/text-area.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  TextArea
3
- } from "./chunk-JC2RQL5O.js";
4
- import "./chunk-WQ2QTUYA.js";
3
+ } from "./chunk-TDMJUF4A.js";
4
+ import "./chunk-SV24ONND.js";
5
5
  import "./chunk-JF3P66JF.js";
6
- import "./chunk-K2Q5MQWJ.js";
6
+ import "./chunk-KNYB3RL7.js";
7
7
  import "./chunk-5WRI5ZAA.js";
8
8
  export {
9
9
  TextArea
package/dist/tokens.cjs CHANGED
@@ -118,7 +118,9 @@ var colors = {
118
118
 
119
119
  // src/tokens/typography.ts
120
120
  var fontFamilies = {
121
+ /** Geist — primary UI font for body text, labels, headings, and display. */
121
122
  GEIST: "Geist",
123
+ /** Crimson Pro — editorial/serif font, always italic. Used for decorative headings and pull quotes. */
122
124
  CRIMSON_PRO: "Crimson Pro"
123
125
  };
124
126
  var typographyTypes = {