ndcloud-storybook 1.0.1 → 1.2.0

package/dist/index.cjs

@@ -53,6 +53,79 @@ var Spinner = ({
   }
 ) });
 var Spinner_default = Spinner;
+
+// src/tokens/colors.ts
+var colors = {
+  // Brand colors
+  baseColors: {
+    // Brand
+    primaryGreen: "#7EE896",
+    primaryPurple: "#6D65DA",
+    // Palette
+    darkBlue1: "#12131B",
+    darkBlue2: "#2A2B33",
+    darkBlue3: "#02061D",
+    grey1: "#3C3C44",
+    grey2: "#45454F",
+    grey3: "#9CA3AF",
+    grey4: "#8E8E98",
+    grey5: "#4B4B4B",
+    grey6: "#353535",
+    grey7: "#ECECED",
+    white1: "#ffffff"
+  },
+  // Hover states
+  hoverColors: {
+    primaryPurple: "#5F56D6"
+  },
+  // Background colors
+  backgrounds: {
+    light1: "#F5F6F8",
+    light2: "#EFF1F8",
+    transparent: "transparent"
+  },
+  // Accents (errors, warnings, etc.)
+  accents: {
+    error: "#F2545B",
+    danger: "#D25E4A",
+    warning: "#ECAC4D"
+  },
+  // Gradients
+  gradients: {
+    gradient1: "linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)"
+  }
+};
+
+// src/tokens/typography.ts
+var FONT_WEIGHTS = {
+  light: 300,
+  regular: 350,
+  normal: 400,
+  medium: 500,
+  bold: 700
+};
+var FONT_SIZES = {
+  xxs: 10,
+  xs: 12,
+  s: 13,
+  m: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24
+};
+var typography = {
+  fontFamily: {
+    primary: '"ABCFavoritExtended", sans-serif'
+  },
+  fontWeight: FONT_WEIGHTS,
+  fontSize: FONT_SIZES,
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.75
+  }
+};
 var Variant = /* @__PURE__ */ ((Variant2) => {
   Variant2["Primary"] = "primary";
   Variant2["Secondary"] = "secondary";
@@ -61,15 +134,15 @@ var Variant = /* @__PURE__ */ ((Variant2) => {
 })(Variant || {});
 var VARIANTS = {
   primary: {
-    background: "linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)",
-    color: "#FFF"
+    background: colors.gradients.gradient1,
+    color: colors.baseColors.white1
   },
   secondary: {
-    background: "#6D65DA",
-    color: "#FFF"
+    background: colors.baseColors.primaryPurple,
+    color: colors.baseColors.white1
   },
   outline: {
-    background: "transparent",
+    background: colors.backgrounds.transparent,
     border: "1px solid rgba(70, 70, 74, 0.10)",
     color: "#0E1116D9"
   }
@@ -80,8 +153,8 @@ var StyledButton = styled__default.default.button`
   justify-content: center;
   padding: 12px 20px;
   border-radius: 100px;
-  font-weight: 500;
-  font-family: "ABCFavoritExtended", sans-serif;
+  font-weight: ${typography.fontWeight.medium};
+  font-family: ${typography.fontFamily.primary};
   transition: all 0.2s ease;
   width: 100%;
   max-width: 336px;
@@ -97,8 +170,8 @@ var StyledButton = styled__default.default.button`
   const { background, color, border } = VARIANTS[variant];
   return react.css`
       background: ${background};
-      border: ${selected ? "2px solid #FFF" : border || "none"};
-      color: ${color || "#FFF"};
+      border: ${selected ? `2px solid ${colors.baseColors.white1}` : border || "none"};
+      color: ${color || colors.baseColors.white1};
       opacity: ${disabled ? 0.5 : 1};
       cursor: ${disabled ? "not-allowed" : "pointer"};
       pointer-events: ${disabled ? "none" : "auto"};
@@ -132,7 +205,259 @@ var Button = ({
 );
 var Button_default = Button;
 
+// src/utils/colorHelpers.ts
+function getOpacity(hexColor, opacity) {
+  const hex = hexColor.trim().replace(/^#/, "");
+  if (!/^[\da-fA-F]{6}$/.test(hex)) {
+    throw new Error(`Invalid hex color: ${hexColor}`);
+  }
+  const opacityFraction = Math.round(opacity / 100 * 255);
+  const alphaHex = opacityFraction.toString(16).padStart(2, "0");
+  return `#${hex}${alphaHex}`;
+}
+
+// src/atoms/shared/inputStyles.ts
+var defaultPadding = "9px 17px";
+var focusedPadding = "8px 16px";
+var baseInputStyles = react.css`
+  border-radius: 10px;
+  border: 1px solid ${colors.baseColors.grey7};
+  padding: ${defaultPadding};
+  color: ${getOpacity(colors.baseColors.darkBlue3, 80)};
+  background-color: ${colors.baseColors.white1};
+  font-weight: ${typography.fontWeight.regular};
+  cursor: text;
+  transition: border-color 0.2s ease;
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: ${colors.baseColors.grey3};
+  }
+
+  &:hover:not(:disabled) {
+    cursor: text;
+  }
+
+  &:focus {
+    outline: none;
+    border-width: 2px;
+    border-color: ${colors.baseColors.primaryPurple};
+    padding: ${focusedPadding};
+  }
+
+  &:disabled {
+    background-color: ${colors.baseColors.grey7};
+    cursor: not-allowed;
+  }
+`;
+var errorStyles = react.css`
+  border-width: 2px;
+  border-color: ${colors.accents.error};
+  padding: ${focusedPadding};
+
+  &:focus {
+    border-width: 2px;
+    border-color: ${colors.accents.error};
+    padding: ${focusedPadding};
+  }
+`;
+var warningStyles = react.css`
+  border-width: 2px;
+  border-color: ${colors.accents.warning};
+  padding: ${focusedPadding};
+
+  &:focus {
+    border-width: 2px;
+    border-color: ${colors.accents.warning};
+    padding: ${focusedPadding};
+  }
+`;
+var Input = ({ className, error, warning, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { className, error, warning, ...rest });
+};
+var Input_default = Input;
+var StyledInput = styled__default.default.input`
+  ${baseInputStyles}
+
+  ${({ error }) => error && errorStyles}
+  ${({ warning }) => warning && warningStyles}
+`;
+var Label = ({ className, htmlFor, children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { className, htmlFor, ...rest, children });
+};
+var Label_default = Label;
+var Textarea = ({ className, error, warning, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTextarea, { className, error, warning, ...rest });
+};
+var Textarea_default = Textarea;
+var StyledTextarea = styled__default.default.textarea`
+  ${baseInputStyles}
+  resize: vertical;
+  min-height: 80px;
+  font-family: inherit;
+
+  ${({ error }) => error && errorStyles}
+  ${({ warning }) => warning && warningStyles}
+`;
+var Tab = ({
+  children,
+  selected,
+  fontSize = "m",
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledTab,
+    {
+      className,
+      selected,
+      fontSize,
+      ...rest,
+      children
+    }
+  );
+};
+var Tab_default = Tab;
+var StyledTab = styled__default.default.div`
+  display: inline-block;
+  padding: 8px 16px;
+  user-select: none;
+  font-size: ${({ fontSize }) => `${typography.fontSize[fontSize]}px`};
+  position: relative;
+  transition: border-color 0.2s ease;
+  cursor: pointer;
+
+  ${({ selected }) => selected && `
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background-color: ${colors.baseColors.primaryGreen};
+    }
+  `}
+`;
+var HelperText = styled__default.default.div`
+  margin-top: 4px;
+  font-size: ${typography.fontSize.xs}px;
+  color: ${({ error, warning }) => {
+  if (error) return colors.accents.error;
+  if (warning) return colors.accents.warning;
+  return colors.baseColors.grey3;
+}};
+`;
+var FormField = ({
+  id,
+  label,
+  helperText,
+  error,
+  warning,
+  onInput,
+  onChange,
+  className,
+  ...inputProps
+}) => {
+  const handleChange = (event) => {
+    if (onInput) {
+      onInput(event.target.value);
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  const displayText = error || warning || helperText;
+  const hasError = !!error;
+  const hasWarning = !!warning && !hasError;
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormFieldWrapper, { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label_default, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input_default,
+      {
+        id,
+        onChange: handleChange,
+        error: hasError,
+        warning: hasWarning,
+        ...inputProps
+      }
+    ),
+    displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
+  ] });
+};
+var FormFieldWrapper = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  
+  label {
+    margin-bottom: 8px;
+    color: ${colors.baseColors.darkBlue3};
+    font-size: ${typography.fontSize.m}px;
+  }
+`;
+var FormField_default = FormField;
+var FormFieldTextarea = ({
+  id,
+  label,
+  helperText,
+  error,
+  warning,
+  onInput,
+  onChange,
+  className,
+  ...textareaProps
+}) => {
+  const handleChange = (event) => {
+    if (onInput) {
+      onInput(event.target.value);
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  const displayText = error || warning || helperText;
+  const hasError = !!error;
+  const hasWarning = !!warning && !hasError;
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormFieldWrapper2, { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label_default, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Textarea_default,
+      {
+        id,
+        onChange: handleChange,
+        error: hasError,
+        warning: hasWarning,
+        ...textareaProps
+      }
+    ),
+    displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
+  ] });
+};
+var FormFieldWrapper2 = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  
+  label {
+    margin-bottom: 8px;
+    color: ${colors.baseColors.darkBlue3};
+    font-size: ${typography.fontSize.m}px;
+  }
+`;
+var FormFieldTextarea_default = FormFieldTextarea;
+
 exports.Button = Button_default;
+exports.FONT_SIZES = FONT_SIZES;
+exports.FONT_WEIGHTS = FONT_WEIGHTS;
+exports.FormField = FormField_default;
+exports.FormFieldTextarea = FormFieldTextarea_default;
+exports.HelperText = HelperText;
+exports.Input = Input_default;
+exports.Label = Label_default;
+exports.Tab = Tab_default;
+exports.Textarea = Textarea_default;
 exports.Variant = Variant;
+exports.colors = colors;
+exports.getOpacity = getOpacity;
+exports.typography = typography;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/Spinner/Spinner.tsx","../src/atoms/Button/Button.tsx"],"names":["keyframes","styled","jsx","jsxs","Variant","css","Fragment"],"mappings":"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","file":"index.cjs","sourcesContent":["/** @jsxImportSource @emotion/react */\nimport React from \"react\";\nimport { keyframes } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\n\ninterface SpinnerProps {\n  size?: number;\n  speed?: string;\n  bgColor?: string;\n  fgColor?: string;\n}\n\nconst spin = keyframes`\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n`;\n\nconst Wrapper = styled.div<SpinnerProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ${({ size = 20 }) => size}px;\n    height: ${({ size = 20 }) => size}px;\n    animation: ${spin} ${({ speed = \"0.75s\" }) => speed} linear infinite;\n    transform-origin: center;\n  }\n`;\n\nconst Spinner: React.FC<SpinnerProps> = ({\n  size = 20,\n  speed = \"0.75s\",\n  bgColor = \"#D1D5DB\",\n  fgColor = \"#FFFFFF\",\n}) => (\n  <Wrapper size={size} speed={speed}>\n    <svg\n      viewBox=\"0 0 50 50\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"status\"\n      aria-label=\"loading\"\n    >\n      <circle cx=\"25\" cy=\"25\" r=\"20\" stroke={bgColor} strokeWidth=\"5\" />\n      <path\n        d=\"M45 25a20 20 0 0 1-20 20\"\n        stroke={fgColor}\n        strokeWidth=\"5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  </Wrapper>\n);\n\nexport default Spinner;\n","/** @jsxImportSource @emotion/react */\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React, { ReactNode } from \"react\";\nimport Spinner from \"../Spinner/Spinner\";\n\ntype VariantName = \"primary\" | \"secondary\" | \"outline\";\n\nexport enum Variant {\n  Primary = \"primary\",\n  Secondary = \"secondary\",\n  Outline = \"outline\",\n}\n\ninterface VariantStyle {\n  background: string;\n  color?: string;\n  border?: string;\n}\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  label: string;\n  variant?: VariantName;\n  disabled?: boolean;\n  selected?: boolean;\n  icon?: ReactNode;\n  loading?: boolean;\n  className?: string;\n}\n\nconst VARIANTS: Record<VariantName, VariantStyle> = {\n  primary: {\n    background: \"linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)\",\n    color: \"#FFF\",\n  },\n  secondary: {\n    background: \"#6D65DA\",\n    color: \"#FFF\",\n  },\n  outline: {\n    background: \"transparent\",\n    border: \"1px solid rgba(70, 70, 74, 0.10)\",\n    color: \"#0E1116D9\",\n  },\n};\n\nconst StyledButton = styled.button<ButtonProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  border-radius: 100px;\n  font-weight: 500;\n  font-family: \"ABCFavoritExtended\", sans-serif;\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 336px;\n\n  span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 8px;\n  }\n\n  ${({ variant = \"primary\", disabled, selected }) => {\n    const { background, color, border } = VARIANTS[variant];\n    return css`\n      background: ${background};\n      border: ${selected ? \"2px solid #FFF\" : border || \"none\"};\n      color: ${color || \"#FFF\"};\n      opacity: ${disabled ? 0.5 : 1};\n      cursor: ${disabled ? \"not-allowed\" : \"pointer\"};\n      pointer-events: ${disabled ? \"none\" : \"auto\"};\n\n      &:focus-visible {\n        outline: 2px solid #0070f3;\n        outline-offset: 2px;\n      }\n    `;\n  }}\n`;\n\nconst Button: React.FC<ButtonProps> = ({\n  label,\n  icon,\n  loading,\n  disabled,\n  className,\n  ...rest\n}) => (\n  <StyledButton\n    label={\"\"}\n    disabled={disabled || loading}\n    className={className}\n    {...rest}\n  >\n    {loading ? (\n      <Spinner />\n    ) : (\n      <>\n        {icon && <span>{icon}</span>}\n        {label}\n      </>\n    )}\n  </StyledButton>\n);\n\nexport default Button;\n"]}
+{"version":3,"sources":["../src/atoms/Spinner/Spinner.tsx","../src/tokens/colors.ts","../src/tokens/typography.ts","../src/atoms/Button/Button.tsx","../src/utils/colorHelpers.ts","../src/atoms/shared/inputStyles.ts","../src/atoms/Input/Input.tsx","../src/atoms/Label/Label.tsx","../src/atoms/Textarea/Textarea.tsx","../src/atoms/Tab/Tab.tsx","../src/atoms/HelperText/HelperText.tsx","../src/molecules/FormField/FormField.tsx","../src/molecules/FormFieldTextarea/FormFieldTextarea.tsx"],"names":["keyframes","styled","jsx","jsxs","Variant","css","Fragment","FormFieldWrapper"],"mappings":"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","file":"index.cjs","sourcesContent":["/** @jsxImportSource @emotion/react */\nimport React from \"react\";\nimport { keyframes } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\n\ninterface SpinnerProps {\n  size?: number;\n  speed?: string;\n  bgColor?: string;\n  fgColor?: string;\n}\n\nconst spin = keyframes`\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n`;\n\nconst Wrapper = styled.div<SpinnerProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ${({ size = 20 }) => size}px;\n    height: ${({ size = 20 }) => size}px;\n    animation: ${spin} ${({ speed = \"0.75s\" }) => speed} linear infinite;\n    transform-origin: center;\n  }\n`;\n\nconst Spinner: React.FC<SpinnerProps> = ({\n  size = 20,\n  speed = \"0.75s\",\n  bgColor = \"#D1D5DB\",\n  fgColor = \"#FFFFFF\",\n}) => (\n  <Wrapper size={size} speed={speed}>\n    <svg\n      viewBox=\"0 0 50 50\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"status\"\n      aria-label=\"loading\"\n    >\n      <circle cx=\"25\" cy=\"25\" r=\"20\" stroke={bgColor} strokeWidth=\"5\" />\n      <path\n        d=\"M45 25a20 20 0 0 1-20 20\"\n        stroke={fgColor}\n        strokeWidth=\"5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  </Wrapper>\n);\n\nexport default Spinner;\n","/**\n * Color tokens for the design system\n */\n\nexport const colors = {\n  // Brand colors\n  baseColors: {\n    // Brand\n    primaryGreen: \"#7EE896\",\n    primaryPurple: \"#6D65DA\",\n\n    // Palette\n    darkBlue1: \"#12131B\",\n    darkBlue2: \"#2A2B33\",\n    darkBlue3: \"#02061D\",\n\n    grey1: \"#3C3C44\",\n    grey2: \"#45454F\",\n    grey3: \"#9CA3AF\",\n    grey4: \"#8E8E98\",\n    grey5: \"#4B4B4B\",\n    grey6: \"#353535\",\n    grey7: \"#ECECED\",\n\n    white1: \"#ffffff\",\n  },\n\n  // Hover states\n  hoverColors: {\n    primaryPurple: \"#5F56D6\",\n  },\n\n  // Background colors\n  backgrounds: {\n    light1: \"#F5F6F8\",\n    light2: \"#EFF1F8\",\n    transparent: \"transparent\",\n  },\n\n  // Accents (errors, warnings, etc.)\n  accents: {\n    error: \"#F2545B\",\n    danger: \"#D25E4A\",\n    warning: \"#ECAC4D\",\n  },\n\n  // Gradients\n  gradients: {\n    gradient1: \"linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)\",\n  },\n} as const;\n\nexport type Colors = typeof colors;\n\n","export type Typography = typeof typography;\n\nexport type FontWeight = (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS];\nexport type FontSize = (typeof FONT_SIZES)[keyof typeof FONT_SIZES];\nexport type Align = \"left\" | \"center\" | \"right\";\n/**\n * Typography tokens for the design system\n */\n\nexport const FONT_WEIGHTS = {\n  light: 300,\n  regular: 350,\n  normal: 400,\n  medium: 500,\n  bold: 700,\n} as const;\n\nexport const FONT_SIZES = {\n  xxs: 10,\n  xs: 12,\n  s: 13,\n  m: 14,\n  base: 16,\n  lg: 18,\n  xl: 20,\n  \"2xl\": 24,\n} as const;\n\nexport const typography = {\n  fontFamily: {\n    primary: '\"ABCFavoritExtended\", sans-serif',\n  },\n\n  fontWeight: FONT_WEIGHTS,\n\n  fontSize: FONT_SIZES,\n\n  lineHeight: {\n    tight: 1.2,\n    normal: 1.5,\n    relaxed: 1.75,\n  },\n} as const;\n\n","/** @jsxImportSource @emotion/react */\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React, { ReactNode } from \"react\";\nimport Spinner from \"../Spinner/Spinner\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\n\ntype VariantName = \"primary\" | \"secondary\" | \"outline\";\n\nexport enum Variant {\n  Primary = \"primary\",\n  Secondary = \"secondary\",\n  Outline = \"outline\",\n}\n\ninterface VariantStyle {\n  background: string;\n  color?: string;\n  border?: string;\n}\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  label: string;\n  variant?: VariantName;\n  disabled?: boolean;\n  selected?: boolean;\n  icon?: ReactNode;\n  loading?: boolean;\n  className?: string;\n}\n\nconst VARIANTS: Record<VariantName, VariantStyle> = {\n  primary: {\n    background: colors.gradients.gradient1,\n    color: colors.baseColors.white1,\n  },\n  secondary: {\n    background: colors.baseColors.primaryPurple,\n    color: colors.baseColors.white1,\n  },\n  outline: {\n    background: colors.backgrounds.transparent,\n    border: \"1px solid rgba(70, 70, 74, 0.10)\",\n    color: \"#0E1116D9\",\n  },\n};\n\nconst StyledButton = styled.button<ButtonProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  border-radius: 100px;\n  font-weight: ${typography.fontWeight.medium};\n  font-family: ${typography.fontFamily.primary};\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 336px;\n\n  span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 8px;\n  }\n\n  ${({ variant = \"primary\", disabled, selected }) => {\n    const { background, color, border } = VARIANTS[variant];\n    return css`\n      background: ${background};\n      border: ${selected ? `2px solid ${colors.baseColors.white1}` : border || \"none\"};\n      color: ${color || colors.baseColors.white1};\n      opacity: ${disabled ? 0.5 : 1};\n      cursor: ${disabled ? \"not-allowed\" : \"pointer\"};\n      pointer-events: ${disabled ? \"none\" : \"auto\"};\n\n      &:focus-visible {\n        outline: 2px solid #0070f3;\n        outline-offset: 2px;\n      }\n    `;\n  }}\n`;\n\nconst Button: React.FC<ButtonProps> = ({\n  label,\n  icon,\n  loading,\n  disabled,\n  className,\n  ...rest\n}) => (\n  <StyledButton\n    label={\"\"}\n    disabled={disabled || loading}\n    className={className}\n    {...rest}\n  >\n    {loading ? (\n      <Spinner />\n    ) : (\n      <>\n        {icon && <span>{icon}</span>}\n        {label}\n      </>\n    )}\n  </StyledButton>\n);\n\nexport default Button;\n","/**\n * Color utility functions for the design system\n */\n\nexport type TOpacity = number; // 0-100\nexport type TColor = string; // Hex color with alpha channel\n\n/**\n * Converts a hex color to a hex color with alpha channel\n * @param hexColor - Hex color string (e.g., \"#6D65DA\" or \"6D65DA\")\n * @param opacity - Opacity value from 0-100\n * @returns Hex color with alpha channel (e.g., \"#6D65DAB3\" for 70% opacity)\n * @throws Error if hex color is invalid\n */\nexport function getOpacity(hexColor: string, opacity: TOpacity): TColor {\n  const hex = hexColor.trim().replace(/^#/, \"\");\n  \n  if (!/^[\\da-fA-F]{6}$/.test(hex)) {\n    throw new Error(`Invalid hex color: ${hexColor}`);\n  }\n\n  const opacityFraction = Math.round((opacity / 100) * 255);\n  const alphaHex = opacityFraction.toString(16).padStart(2, \"0\");\n\n  return `#${hex}${alphaHex}`;\n}\n\n","import { css } from \"@emotion/react\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\nimport { getOpacity } from \"../../utils/colorHelpers\";\n\nexport const defaultPadding = \"9px 17px\";\nexport const focusedPadding = \"8px 16px\";\n\nexport const baseInputStyles = css`\n  border-radius: 10px;\n  border: 1px solid ${colors.baseColors.grey7};\n  padding: ${defaultPadding};\n  color: ${getOpacity(colors.baseColors.darkBlue3, 80)};\n  background-color: ${colors.baseColors.white1};\n  font-weight: ${typography.fontWeight.regular};\n  cursor: text;\n  transition: border-color 0.2s ease;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ${colors.baseColors.grey3};\n  }\n\n  &:hover:not(:disabled) {\n    cursor: text;\n  }\n\n  &:focus {\n    outline: none;\n    border-width: 2px;\n    border-color: ${colors.baseColors.primaryPurple};\n    padding: ${focusedPadding};\n  }\n\n  &:disabled {\n    background-color: ${colors.baseColors.grey7};\n    cursor: not-allowed;\n  }\n`;\n\nexport const errorStyles = css`\n  border-width: 2px;\n  border-color: ${colors.accents.error};\n  padding: ${focusedPadding};\n\n  &:focus {\n    border-width: 2px;\n    border-color: ${colors.accents.error};\n    padding: ${focusedPadding};\n  }\n`;\n\nexport const warningStyles = css`\n  border-width: 2px;\n  border-color: ${colors.accents.warning};\n  padding: ${focusedPadding};\n\n  &:focus {\n    border-width: 2px;\n    border-color: ${colors.accents.warning};\n    padding: ${focusedPadding};\n  }\n`;\n\n","import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { baseInputStyles, errorStyles, warningStyles } from \"../shared/inputStyles\";\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  className?: string;\n  error?: boolean;\n  warning?: boolean;\n}\n\nconst Input: React.FC<InputProps> = ({ className, error, warning, ...rest }) => {\n  return <StyledInput className={className} error={error} warning={warning} {...rest} />;\n};\n\nexport default Input;\n\nconst StyledInput = styled.input<InputProps>`\n  ${baseInputStyles}\n\n  ${({ error }) => error && errorStyles}\n  ${({ warning }) => warning && warningStyles}\n`;","import React from \"react\";\n\nexport interface LabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  className?: string;\n  htmlFor?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ className, htmlFor, children, ...rest }) => {\n  return (\n    <label className={className} htmlFor={htmlFor} {...rest}>\n      {children}\n    </label>\n  );\n};\n\nexport default Label;\n\n","import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { baseInputStyles, errorStyles, warningStyles } from \"../shared/inputStyles\";\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  className?: string;\n  error?: boolean;\n  warning?: boolean;\n}\n\nconst Textarea: React.FC<TextareaProps> = ({ className, error, warning, ...rest }) => {\n  return <StyledTextarea className={className} error={error} warning={warning} {...rest} />;\n};\n\nexport default Textarea;\n\nconst StyledTextarea = styled.textarea<TextareaProps>`\n  ${baseInputStyles}\n  resize: vertical;\n  min-height: 80px;\n  font-family: inherit;\n\n  ${({ error }) => error && errorStyles}\n  ${({ warning }) => warning && warningStyles}\n`;\n\n","import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography, FONT_SIZES } from \"../../tokens/typography\";\n\ntype FontSizeKey = keyof typeof FONT_SIZES;\n\nexport interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"fontSize\"> {\n  children: React.ReactNode;\n  selected?: boolean;\n  fontSize?: FontSizeKey;\n  className?: string;\n}\n\ninterface StyledTabProps {\n  selected?: boolean;\n  fontSize: FontSizeKey;\n}\n\nconst Tab: React.FC<TabProps> = ({\n  children,\n  selected,\n  fontSize = \"m\",\n  className,\n  ...rest\n}) => {\n  return (\n    <StyledTab\n      className={className}\n      selected={selected}\n      fontSize={fontSize}\n      {...rest}\n    >\n      {children}\n    </StyledTab>\n  );\n};\n\nexport default Tab;\n\nconst StyledTab = styled.div<StyledTabProps>`\n  display: inline-block;\n  padding: 8px 16px;\n  user-select: none;\n  font-size: ${({ fontSize }) => `${typography.fontSize[fontSize]}px`};\n  position: relative;\n  transition: border-color 0.2s ease;\n  cursor: pointer;\n\n  ${({ selected }) =>\n    selected &&\n    `\n    &::after {\n      content: '';\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      height: 3px;\n      background-color: ${colors.baseColors.primaryGreen};\n    }\n  `}\n`;\n\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\n\nexport interface HelperTextProps {\n  error?: boolean;\n  warning?: boolean;\n  children: React.ReactNode;\n}\n\nexport const HelperText = styled.div<HelperTextProps>`\n  margin-top: 4px;\n  font-size: ${typography.fontSize.xs}px;\n  color: ${({ error, warning }) => {\n    if (error) return colors.accents.error;\n    if (warning) return colors.accents.warning;\n    return colors.baseColors.grey3;\n  }};\n`;\n\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Input, { InputProps } from \"../../atoms/Input\";\nimport Label from \"../../atoms/Label\";\nimport { HelperText } from \"../../atoms/HelperText\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\n\nexport interface FormFieldProps extends Omit<InputProps, \"id\" | \"onInput\" | \"error\" | \"warning\"> {\n  id: string;\n  label: string;\n  helperText?: string;\n  error?: string;\n  warning?: string;\n  onInput?: (value: string) => void;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst FormField: React.FC<FormFieldProps> = ({\n  id,\n  label,\n  helperText,\n  error,\n  warning,\n  onInput,\n  onChange,\n  className,\n  ...inputProps\n}) => {\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (onInput) {\n      onInput(event.target.value);\n    }\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const displayText = error || warning || helperText;\n  const hasError = !!error;\n  const hasWarning = !!warning && !hasError;\n\n  return (\n    <FormFieldWrapper className={className}>\n      <Label htmlFor={id}>{label}</Label>\n      <Input\n        id={id}\n        onChange={handleChange}\n        error={hasError}\n        warning={hasWarning}\n        {...inputProps}\n      />\n      {displayText && (\n        <HelperText error={hasError} warning={hasWarning}>\n          {displayText}\n        </HelperText>\n      )}\n    </FormFieldWrapper>\n  );\n};\n\nconst FormFieldWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  \n  label {\n    margin-bottom: 8px;\n    color: ${colors.baseColors.darkBlue3};\n    font-size: ${typography.fontSize.m}px;\n  }\n`;\n\nexport default FormField;\n\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Textarea, { TextareaProps } from \"../../atoms/Textarea\";\nimport Label from \"../../atoms/Label\";\nimport { HelperText } from \"../../atoms/HelperText\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\n\nexport interface FormFieldTextareaProps extends Omit<TextareaProps, \"id\" | \"onInput\" | \"error\" | \"warning\"> {\n  id: string;\n  label: string;\n  helperText?: string;\n  error?: string;\n  warning?: string;\n  onInput?: (value: string) => void;\n  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst FormFieldTextarea: React.FC<FormFieldTextareaProps> = ({\n  id,\n  label,\n  helperText,\n  error,\n  warning,\n  onInput,\n  onChange,\n  className,\n  ...textareaProps\n}) => {\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (onInput) {\n      onInput(event.target.value);\n    }\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const displayText = error || warning || helperText;\n  const hasError = !!error;\n  const hasWarning = !!warning && !hasError;\n\n  return (\n    <FormFieldWrapper className={className}>\n      <Label htmlFor={id}>{label}</Label>\n      <Textarea\n        id={id}\n        onChange={handleChange}\n        error={hasError}\n        warning={hasWarning}\n        {...textareaProps}\n      />\n      {displayText && (\n        <HelperText error={hasError} warning={hasWarning}>\n          {displayText}\n        </HelperText>\n      )}\n    </FormFieldWrapper>\n  );\n};\n\nconst FormFieldWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  \n  label {\n    margin-bottom: 8px;\n    color: ${colors.baseColors.darkBlue3};\n    font-size: ${typography.fontSize.m}px;\n  }\n`;\n\nexport default FormFieldTextarea;\n\n"]}

package/dist/index.d.cts

@@ -1,4 +1,6 @@
 import React, { ReactNode } from 'react';
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
 
 type VariantName = "primary" | "secondary" | "outline";
 declare enum Variant {
@@ -17,4 +19,169 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: React.FC<ButtonProps>;
 
-export { Button, type ButtonProps, Variant };
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+    error?: boolean;
+    warning?: boolean;
+}
+declare const Input: React.FC<InputProps>;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    className?: string;
+    htmlFor?: string;
+}
+declare const Label: React.FC<LabelProps>;
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+    error?: boolean;
+    warning?: boolean;
+}
+declare const Textarea: React.FC<TextareaProps>;
+
+type Typography = typeof typography;
+type FontWeight = (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS];
+type FontSize = (typeof FONT_SIZES)[keyof typeof FONT_SIZES];
+type Align = "left" | "center" | "right";
+/**
+ * Typography tokens for the design system
+ */
+declare const FONT_WEIGHTS: {
+    readonly light: 300;
+    readonly regular: 350;
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly bold: 700;
+};
+declare const FONT_SIZES: {
+    readonly xxs: 10;
+    readonly xs: 12;
+    readonly s: 13;
+    readonly m: 14;
+    readonly base: 16;
+    readonly lg: 18;
+    readonly xl: 20;
+    readonly "2xl": 24;
+};
+declare const typography: {
+    readonly fontFamily: {
+        readonly primary: "\"ABCFavoritExtended\", sans-serif";
+    };
+    readonly fontWeight: {
+        readonly light: 300;
+        readonly regular: 350;
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly bold: 700;
+    };
+    readonly fontSize: {
+        readonly xxs: 10;
+        readonly xs: 12;
+        readonly s: 13;
+        readonly m: 14;
+        readonly base: 16;
+        readonly lg: 18;
+        readonly xl: 20;
+        readonly "2xl": 24;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+
+type FontSizeKey = keyof typeof FONT_SIZES;
+interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "fontSize"> {
+    children: React.ReactNode;
+    selected?: boolean;
+    fontSize?: FontSizeKey;
+    className?: string;
+}
+declare const Tab: React.FC<TabProps>;
+
+interface HelperTextProps {
+    error?: boolean;
+    warning?: boolean;
+    children: React.ReactNode;
+}
+declare const HelperText: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+} & HelperTextProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+interface FormFieldProps extends Omit<InputProps, "id" | "onInput" | "error" | "warning"> {
+    id: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    warning?: string;
+    onInput?: (value: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const FormField: React.FC<FormFieldProps>;
+
+interface FormFieldTextareaProps extends Omit<TextareaProps, "id" | "onInput" | "error" | "warning"> {
+    id: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    warning?: string;
+    onInput?: (value: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+declare const FormFieldTextarea: React.FC<FormFieldTextareaProps>;
+
+/**
+ * Color tokens for the design system
+ */
+declare const colors: {
+    readonly baseColors: {
+        readonly primaryGreen: "#7EE896";
+        readonly primaryPurple: "#6D65DA";
+        readonly darkBlue1: "#12131B";
+        readonly darkBlue2: "#2A2B33";
+        readonly darkBlue3: "#02061D";
+        readonly grey1: "#3C3C44";
+        readonly grey2: "#45454F";
+        readonly grey3: "#9CA3AF";
+        readonly grey4: "#8E8E98";
+        readonly grey5: "#4B4B4B";
+        readonly grey6: "#353535";
+        readonly grey7: "#ECECED";
+        readonly white1: "#ffffff";
+    };
+    readonly hoverColors: {
+        readonly primaryPurple: "#5F56D6";
+    };
+    readonly backgrounds: {
+        readonly light1: "#F5F6F8";
+        readonly light2: "#EFF1F8";
+        readonly transparent: "transparent";
+    };
+    readonly accents: {
+        readonly error: "#F2545B";
+        readonly danger: "#D25E4A";
+        readonly warning: "#ECAC4D";
+    };
+    readonly gradients: {
+        readonly gradient1: "linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)";
+    };
+};
+type Colors = typeof colors;
+
+/**
+ * Color utility functions for the design system
+ */
+type TOpacity = number;
+type TColor = string;
+/**
+ * Converts a hex color to a hex color with alpha channel
+ * @param hexColor - Hex color string (e.g., "#6D65DA" or "6D65DA")
+ * @param opacity - Opacity value from 0-100
+ * @returns Hex color with alpha channel (e.g., "#6D65DAB3" for 70% opacity)
+ * @throws Error if hex color is invalid
+ */
+declare function getOpacity(hexColor: string, opacity: TOpacity): TColor;
+
+export { type Align, Button, type ButtonProps, type Colors, FONT_SIZES, FONT_WEIGHTS, type FontSize, type FontWeight, FormField, type FormFieldProps, FormFieldTextarea, type FormFieldTextareaProps, HelperText, type HelperTextProps, Input, type InputProps, Label, type LabelProps, type TColor, type TOpacity, Tab, type TabProps, Textarea, type TextareaProps, type Typography, Variant, colors, getOpacity, typography };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import React, { ReactNode } from 'react';
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
 
 type VariantName = "primary" | "secondary" | "outline";
 declare enum Variant {
@@ -17,4 +19,169 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: React.FC<ButtonProps>;
 
-export { Button, type ButtonProps, Variant };
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+    error?: boolean;
+    warning?: boolean;
+}
+declare const Input: React.FC<InputProps>;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    className?: string;
+    htmlFor?: string;
+}
+declare const Label: React.FC<LabelProps>;
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+    error?: boolean;
+    warning?: boolean;
+}
+declare const Textarea: React.FC<TextareaProps>;
+
+type Typography = typeof typography;
+type FontWeight = (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS];
+type FontSize = (typeof FONT_SIZES)[keyof typeof FONT_SIZES];
+type Align = "left" | "center" | "right";
+/**
+ * Typography tokens for the design system
+ */
+declare const FONT_WEIGHTS: {
+    readonly light: 300;
+    readonly regular: 350;
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly bold: 700;
+};
+declare const FONT_SIZES: {
+    readonly xxs: 10;
+    readonly xs: 12;
+    readonly s: 13;
+    readonly m: 14;
+    readonly base: 16;
+    readonly lg: 18;
+    readonly xl: 20;
+    readonly "2xl": 24;
+};
+declare const typography: {
+    readonly fontFamily: {
+        readonly primary: "\"ABCFavoritExtended\", sans-serif";
+    };
+    readonly fontWeight: {
+        readonly light: 300;
+        readonly regular: 350;
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly bold: 700;
+    };
+    readonly fontSize: {
+        readonly xxs: 10;
+        readonly xs: 12;
+        readonly s: 13;
+        readonly m: 14;
+        readonly base: 16;
+        readonly lg: 18;
+        readonly xl: 20;
+        readonly "2xl": 24;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+
+type FontSizeKey = keyof typeof FONT_SIZES;
+interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "fontSize"> {
+    children: React.ReactNode;
+    selected?: boolean;
+    fontSize?: FontSizeKey;
+    className?: string;
+}
+declare const Tab: React.FC<TabProps>;
+
+interface HelperTextProps {
+    error?: boolean;
+    warning?: boolean;
+    children: React.ReactNode;
+}
+declare const HelperText: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+} & HelperTextProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+interface FormFieldProps extends Omit<InputProps, "id" | "onInput" | "error" | "warning"> {
+    id: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    warning?: string;
+    onInput?: (value: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const FormField: React.FC<FormFieldProps>;
+
+interface FormFieldTextareaProps extends Omit<TextareaProps, "id" | "onInput" | "error" | "warning"> {
+    id: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    warning?: string;
+    onInput?: (value: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+declare const FormFieldTextarea: React.FC<FormFieldTextareaProps>;
+
+/**
+ * Color tokens for the design system
+ */
+declare const colors: {
+    readonly baseColors: {
+        readonly primaryGreen: "#7EE896";
+        readonly primaryPurple: "#6D65DA";
+        readonly darkBlue1: "#12131B";
+        readonly darkBlue2: "#2A2B33";
+        readonly darkBlue3: "#02061D";
+        readonly grey1: "#3C3C44";
+        readonly grey2: "#45454F";
+        readonly grey3: "#9CA3AF";
+        readonly grey4: "#8E8E98";
+        readonly grey5: "#4B4B4B";
+        readonly grey6: "#353535";
+        readonly grey7: "#ECECED";
+        readonly white1: "#ffffff";
+    };
+    readonly hoverColors: {
+        readonly primaryPurple: "#5F56D6";
+    };
+    readonly backgrounds: {
+        readonly light1: "#F5F6F8";
+        readonly light2: "#EFF1F8";
+        readonly transparent: "transparent";
+    };
+    readonly accents: {
+        readonly error: "#F2545B";
+        readonly danger: "#D25E4A";
+        readonly warning: "#ECAC4D";
+    };
+    readonly gradients: {
+        readonly gradient1: "linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)";
+    };
+};
+type Colors = typeof colors;
+
+/**
+ * Color utility functions for the design system
+ */
+type TOpacity = number;
+type TColor = string;
+/**
+ * Converts a hex color to a hex color with alpha channel
+ * @param hexColor - Hex color string (e.g., "#6D65DA" or "6D65DA")
+ * @param opacity - Opacity value from 0-100
+ * @returns Hex color with alpha channel (e.g., "#6D65DAB3" for 70% opacity)
+ * @throws Error if hex color is invalid
+ */
+declare function getOpacity(hexColor: string, opacity: TOpacity): TColor;
+
+export { type Align, Button, type ButtonProps, type Colors, FONT_SIZES, FONT_WEIGHTS, type FontSize, type FontWeight, FormField, type FormFieldProps, FormFieldTextarea, type FormFieldTextareaProps, HelperText, type HelperTextProps, Input, type InputProps, Label, type LabelProps, type TColor, type TOpacity, Tab, type TabProps, Textarea, type TextareaProps, type Typography, Variant, colors, getOpacity, typography };

package/dist/index.js

@@ -47,6 +47,79 @@ var Spinner = ({
   }
 ) });
 var Spinner_default = Spinner;
+
+// src/tokens/colors.ts
+var colors = {
+  // Brand colors
+  baseColors: {
+    // Brand
+    primaryGreen: "#7EE896",
+    primaryPurple: "#6D65DA",
+    // Palette
+    darkBlue1: "#12131B",
+    darkBlue2: "#2A2B33",
+    darkBlue3: "#02061D",
+    grey1: "#3C3C44",
+    grey2: "#45454F",
+    grey3: "#9CA3AF",
+    grey4: "#8E8E98",
+    grey5: "#4B4B4B",
+    grey6: "#353535",
+    grey7: "#ECECED",
+    white1: "#ffffff"
+  },
+  // Hover states
+  hoverColors: {
+    primaryPurple: "#5F56D6"
+  },
+  // Background colors
+  backgrounds: {
+    light1: "#F5F6F8",
+    light2: "#EFF1F8",
+    transparent: "transparent"
+  },
+  // Accents (errors, warnings, etc.)
+  accents: {
+    error: "#F2545B",
+    danger: "#D25E4A",
+    warning: "#ECAC4D"
+  },
+  // Gradients
+  gradients: {
+    gradient1: "linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)"
+  }
+};
+
+// src/tokens/typography.ts
+var FONT_WEIGHTS = {
+  light: 300,
+  regular: 350,
+  normal: 400,
+  medium: 500,
+  bold: 700
+};
+var FONT_SIZES = {
+  xxs: 10,
+  xs: 12,
+  s: 13,
+  m: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24
+};
+var typography = {
+  fontFamily: {
+    primary: '"ABCFavoritExtended", sans-serif'
+  },
+  fontWeight: FONT_WEIGHTS,
+  fontSize: FONT_SIZES,
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.75
+  }
+};
 var Variant = /* @__PURE__ */ ((Variant2) => {
   Variant2["Primary"] = "primary";
   Variant2["Secondary"] = "secondary";
@@ -55,15 +128,15 @@ var Variant = /* @__PURE__ */ ((Variant2) => {
 })(Variant || {});
 var VARIANTS = {
   primary: {
-    background: "linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)",
-    color: "#FFF"
+    background: colors.gradients.gradient1,
+    color: colors.baseColors.white1
   },
   secondary: {
-    background: "#6D65DA",
-    color: "#FFF"
+    background: colors.baseColors.primaryPurple,
+    color: colors.baseColors.white1
   },
   outline: {
-    background: "transparent",
+    background: colors.backgrounds.transparent,
     border: "1px solid rgba(70, 70, 74, 0.10)",
     color: "#0E1116D9"
   }
@@ -74,8 +147,8 @@ var StyledButton = styled.button`
   justify-content: center;
   padding: 12px 20px;
   border-radius: 100px;
-  font-weight: 500;
-  font-family: "ABCFavoritExtended", sans-serif;
+  font-weight: ${typography.fontWeight.medium};
+  font-family: ${typography.fontFamily.primary};
   transition: all 0.2s ease;
   width: 100%;
   max-width: 336px;
@@ -91,8 +164,8 @@ var StyledButton = styled.button`
   const { background, color, border } = VARIANTS[variant];
   return css`
       background: ${background};
-      border: ${selected ? "2px solid #FFF" : border || "none"};
-      color: ${color || "#FFF"};
+      border: ${selected ? `2px solid ${colors.baseColors.white1}` : border || "none"};
+      color: ${color || colors.baseColors.white1};
       opacity: ${disabled ? 0.5 : 1};
       cursor: ${disabled ? "not-allowed" : "pointer"};
       pointer-events: ${disabled ? "none" : "auto"};
@@ -126,6 +199,246 @@ var Button = ({
 );
 var Button_default = Button;
 
-export { Button_default as Button, Variant };
+// src/utils/colorHelpers.ts
+function getOpacity(hexColor, opacity) {
+  const hex = hexColor.trim().replace(/^#/, "");
+  if (!/^[\da-fA-F]{6}$/.test(hex)) {
+    throw new Error(`Invalid hex color: ${hexColor}`);
+  }
+  const opacityFraction = Math.round(opacity / 100 * 255);
+  const alphaHex = opacityFraction.toString(16).padStart(2, "0");
+  return `#${hex}${alphaHex}`;
+}
+
+// src/atoms/shared/inputStyles.ts
+var defaultPadding = "9px 17px";
+var focusedPadding = "8px 16px";
+var baseInputStyles = css`
+  border-radius: 10px;
+  border: 1px solid ${colors.baseColors.grey7};
+  padding: ${defaultPadding};
+  color: ${getOpacity(colors.baseColors.darkBlue3, 80)};
+  background-color: ${colors.baseColors.white1};
+  font-weight: ${typography.fontWeight.regular};
+  cursor: text;
+  transition: border-color 0.2s ease;
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: ${colors.baseColors.grey3};
+  }
+
+  &:hover:not(:disabled) {
+    cursor: text;
+  }
+
+  &:focus {
+    outline: none;
+    border-width: 2px;
+    border-color: ${colors.baseColors.primaryPurple};
+    padding: ${focusedPadding};
+  }
+
+  &:disabled {
+    background-color: ${colors.baseColors.grey7};
+    cursor: not-allowed;
+  }
+`;
+var errorStyles = css`
+  border-width: 2px;
+  border-color: ${colors.accents.error};
+  padding: ${focusedPadding};
+
+  &:focus {
+    border-width: 2px;
+    border-color: ${colors.accents.error};
+    padding: ${focusedPadding};
+  }
+`;
+var warningStyles = css`
+  border-width: 2px;
+  border-color: ${colors.accents.warning};
+  padding: ${focusedPadding};
+
+  &:focus {
+    border-width: 2px;
+    border-color: ${colors.accents.warning};
+    padding: ${focusedPadding};
+  }
+`;
+var Input = ({ className, error, warning, ...rest }) => {
+  return /* @__PURE__ */ jsx(StyledInput, { className, error, warning, ...rest });
+};
+var Input_default = Input;
+var StyledInput = styled.input`
+  ${baseInputStyles}
+
+  ${({ error }) => error && errorStyles}
+  ${({ warning }) => warning && warningStyles}
+`;
+var Label = ({ className, htmlFor, children, ...rest }) => {
+  return /* @__PURE__ */ jsx("label", { className, htmlFor, ...rest, children });
+};
+var Label_default = Label;
+var Textarea = ({ className, error, warning, ...rest }) => {
+  return /* @__PURE__ */ jsx(StyledTextarea, { className, error, warning, ...rest });
+};
+var Textarea_default = Textarea;
+var StyledTextarea = styled.textarea`
+  ${baseInputStyles}
+  resize: vertical;
+  min-height: 80px;
+  font-family: inherit;
+
+  ${({ error }) => error && errorStyles}
+  ${({ warning }) => warning && warningStyles}
+`;
+var Tab = ({
+  children,
+  selected,
+  fontSize = "m",
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    StyledTab,
+    {
+      className,
+      selected,
+      fontSize,
+      ...rest,
+      children
+    }
+  );
+};
+var Tab_default = Tab;
+var StyledTab = styled.div`
+  display: inline-block;
+  padding: 8px 16px;
+  user-select: none;
+  font-size: ${({ fontSize }) => `${typography.fontSize[fontSize]}px`};
+  position: relative;
+  transition: border-color 0.2s ease;
+  cursor: pointer;
+
+  ${({ selected }) => selected && `
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background-color: ${colors.baseColors.primaryGreen};
+    }
+  `}
+`;
+var HelperText = styled.div`
+  margin-top: 4px;
+  font-size: ${typography.fontSize.xs}px;
+  color: ${({ error, warning }) => {
+  if (error) return colors.accents.error;
+  if (warning) return colors.accents.warning;
+  return colors.baseColors.grey3;
+}};
+`;
+var FormField = ({
+  id,
+  label,
+  helperText,
+  error,
+  warning,
+  onInput,
+  onChange,
+  className,
+  ...inputProps
+}) => {
+  const handleChange = (event) => {
+    if (onInput) {
+      onInput(event.target.value);
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  const displayText = error || warning || helperText;
+  const hasError = !!error;
+  const hasWarning = !!warning && !hasError;
+  return /* @__PURE__ */ jsxs(FormFieldWrapper, { className, children: [
+    /* @__PURE__ */ jsx(Label_default, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      Input_default,
+      {
+        id,
+        onChange: handleChange,
+        error: hasError,
+        warning: hasWarning,
+        ...inputProps
+      }
+    ),
+    displayText && /* @__PURE__ */ jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
+  ] });
+};
+var FormFieldWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  
+  label {
+    margin-bottom: 8px;
+    color: ${colors.baseColors.darkBlue3};
+    font-size: ${typography.fontSize.m}px;
+  }
+`;
+var FormField_default = FormField;
+var FormFieldTextarea = ({
+  id,
+  label,
+  helperText,
+  error,
+  warning,
+  onInput,
+  onChange,
+  className,
+  ...textareaProps
+}) => {
+  const handleChange = (event) => {
+    if (onInput) {
+      onInput(event.target.value);
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  const displayText = error || warning || helperText;
+  const hasError = !!error;
+  const hasWarning = !!warning && !hasError;
+  return /* @__PURE__ */ jsxs(FormFieldWrapper2, { className, children: [
+    /* @__PURE__ */ jsx(Label_default, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      Textarea_default,
+      {
+        id,
+        onChange: handleChange,
+        error: hasError,
+        warning: hasWarning,
+        ...textareaProps
+      }
+    ),
+    displayText && /* @__PURE__ */ jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
+  ] });
+};
+var FormFieldWrapper2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  
+  label {
+    margin-bottom: 8px;
+    color: ${colors.baseColors.darkBlue3};
+    font-size: ${typography.fontSize.m}px;
+  }
+`;
+var FormFieldTextarea_default = FormFieldTextarea;
+
+export { Button_default as Button, FONT_SIZES, FONT_WEIGHTS, FormField_default as FormField, FormFieldTextarea_default as FormFieldTextarea, HelperText, Input_default as Input, Label_default as Label, Tab_default as Tab, Textarea_default as Textarea, Variant, colors, getOpacity, typography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/Spinner/Spinner.tsx","../src/atoms/Button/Button.tsx"],"names":["Variant","styled","jsx","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["/** @jsxImportSource @emotion/react */\nimport React from \"react\";\nimport { keyframes } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\n\ninterface SpinnerProps {\n  size?: number;\n  speed?: string;\n  bgColor?: string;\n  fgColor?: string;\n}\n\nconst spin = keyframes`\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n`;\n\nconst Wrapper = styled.div<SpinnerProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ${({ size = 20 }) => size}px;\n    height: ${({ size = 20 }) => size}px;\n    animation: ${spin} ${({ speed = \"0.75s\" }) => speed} linear infinite;\n    transform-origin: center;\n  }\n`;\n\nconst Spinner: React.FC<SpinnerProps> = ({\n  size = 20,\n  speed = \"0.75s\",\n  bgColor = \"#D1D5DB\",\n  fgColor = \"#FFFFFF\",\n}) => (\n  <Wrapper size={size} speed={speed}>\n    <svg\n      viewBox=\"0 0 50 50\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"status\"\n      aria-label=\"loading\"\n    >\n      <circle cx=\"25\" cy=\"25\" r=\"20\" stroke={bgColor} strokeWidth=\"5\" />\n      <path\n        d=\"M45 25a20 20 0 0 1-20 20\"\n        stroke={fgColor}\n        strokeWidth=\"5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  </Wrapper>\n);\n\nexport default Spinner;\n","/** @jsxImportSource @emotion/react */\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React, { ReactNode } from \"react\";\nimport Spinner from \"../Spinner/Spinner\";\n\ntype VariantName = \"primary\" | \"secondary\" | \"outline\";\n\nexport enum Variant {\n  Primary = \"primary\",\n  Secondary = \"secondary\",\n  Outline = \"outline\",\n}\n\ninterface VariantStyle {\n  background: string;\n  color?: string;\n  border?: string;\n}\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  label: string;\n  variant?: VariantName;\n  disabled?: boolean;\n  selected?: boolean;\n  icon?: ReactNode;\n  loading?: boolean;\n  className?: string;\n}\n\nconst VARIANTS: Record<VariantName, VariantStyle> = {\n  primary: {\n    background: \"linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)\",\n    color: \"#FFF\",\n  },\n  secondary: {\n    background: \"#6D65DA\",\n    color: \"#FFF\",\n  },\n  outline: {\n    background: \"transparent\",\n    border: \"1px solid rgba(70, 70, 74, 0.10)\",\n    color: \"#0E1116D9\",\n  },\n};\n\nconst StyledButton = styled.button<ButtonProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  border-radius: 100px;\n  font-weight: 500;\n  font-family: \"ABCFavoritExtended\", sans-serif;\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 336px;\n\n  span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 8px;\n  }\n\n  ${({ variant = \"primary\", disabled, selected }) => {\n    const { background, color, border } = VARIANTS[variant];\n    return css`\n      background: ${background};\n      border: ${selected ? \"2px solid #FFF\" : border || \"none\"};\n      color: ${color || \"#FFF\"};\n      opacity: ${disabled ? 0.5 : 1};\n      cursor: ${disabled ? \"not-allowed\" : \"pointer\"};\n      pointer-events: ${disabled ? \"none\" : \"auto\"};\n\n      &:focus-visible {\n        outline: 2px solid #0070f3;\n        outline-offset: 2px;\n      }\n    `;\n  }}\n`;\n\nconst Button: React.FC<ButtonProps> = ({\n  label,\n  icon,\n  loading,\n  disabled,\n  className,\n  ...rest\n}) => (\n  <StyledButton\n    label={\"\"}\n    disabled={disabled || loading}\n    className={className}\n    {...rest}\n  >\n    {loading ? (\n      <Spinner />\n    ) : (\n      <>\n        {icon && <span>{icon}</span>}\n        {label}\n      </>\n    )}\n  </StyledButton>\n);\n\nexport default Button;\n"]}
+{"version":3,"sources":["../src/atoms/Spinner/Spinner.tsx","../src/tokens/colors.ts","../src/tokens/typography.ts","../src/atoms/Button/Button.tsx","../src/utils/colorHelpers.ts","../src/atoms/shared/inputStyles.ts","../src/atoms/Input/Input.tsx","../src/atoms/Label/Label.tsx","../src/atoms/Textarea/Textarea.tsx","../src/atoms/Tab/Tab.tsx","../src/atoms/HelperText/HelperText.tsx","../src/molecules/FormField/FormField.tsx","../src/molecules/FormFieldTextarea/FormFieldTextarea.tsx"],"names":["Variant","styled","jsx","jsxs","css","FormFieldWrapper"],"mappings":"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","file":"index.js","sourcesContent":["/** @jsxImportSource @emotion/react */\nimport React from \"react\";\nimport { keyframes } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\n\ninterface SpinnerProps {\n  size?: number;\n  speed?: string;\n  bgColor?: string;\n  fgColor?: string;\n}\n\nconst spin = keyframes`\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n`;\n\nconst Wrapper = styled.div<SpinnerProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ${({ size = 20 }) => size}px;\n    height: ${({ size = 20 }) => size}px;\n    animation: ${spin} ${({ speed = \"0.75s\" }) => speed} linear infinite;\n    transform-origin: center;\n  }\n`;\n\nconst Spinner: React.FC<SpinnerProps> = ({\n  size = 20,\n  speed = \"0.75s\",\n  bgColor = \"#D1D5DB\",\n  fgColor = \"#FFFFFF\",\n}) => (\n  <Wrapper size={size} speed={speed}>\n    <svg\n      viewBox=\"0 0 50 50\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"status\"\n      aria-label=\"loading\"\n    >\n      <circle cx=\"25\" cy=\"25\" r=\"20\" stroke={bgColor} strokeWidth=\"5\" />\n      <path\n        d=\"M45 25a20 20 0 0 1-20 20\"\n        stroke={fgColor}\n        strokeWidth=\"5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  </Wrapper>\n);\n\nexport default Spinner;\n","/**\n * Color tokens for the design system\n */\n\nexport const colors = {\n  // Brand colors\n  baseColors: {\n    // Brand\n    primaryGreen: \"#7EE896\",\n    primaryPurple: \"#6D65DA\",\n\n    // Palette\n    darkBlue1: \"#12131B\",\n    darkBlue2: \"#2A2B33\",\n    darkBlue3: \"#02061D\",\n\n    grey1: \"#3C3C44\",\n    grey2: \"#45454F\",\n    grey3: \"#9CA3AF\",\n    grey4: \"#8E8E98\",\n    grey5: \"#4B4B4B\",\n    grey6: \"#353535\",\n    grey7: \"#ECECED\",\n\n    white1: \"#ffffff\",\n  },\n\n  // Hover states\n  hoverColors: {\n    primaryPurple: \"#5F56D6\",\n  },\n\n  // Background colors\n  backgrounds: {\n    light1: \"#F5F6F8\",\n    light2: \"#EFF1F8\",\n    transparent: \"transparent\",\n  },\n\n  // Accents (errors, warnings, etc.)\n  accents: {\n    error: \"#F2545B\",\n    danger: \"#D25E4A\",\n    warning: \"#ECAC4D\",\n  },\n\n  // Gradients\n  gradients: {\n    gradient1: \"linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)\",\n  },\n} as const;\n\nexport type Colors = typeof colors;\n\n","export type Typography = typeof typography;\n\nexport type FontWeight = (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS];\nexport type FontSize = (typeof FONT_SIZES)[keyof typeof FONT_SIZES];\nexport type Align = \"left\" | \"center\" | \"right\";\n/**\n * Typography tokens for the design system\n */\n\nexport const FONT_WEIGHTS = {\n  light: 300,\n  regular: 350,\n  normal: 400,\n  medium: 500,\n  bold: 700,\n} as const;\n\nexport const FONT_SIZES = {\n  xxs: 10,\n  xs: 12,\n  s: 13,\n  m: 14,\n  base: 16,\n  lg: 18,\n  xl: 20,\n  \"2xl\": 24,\n} as const;\n\nexport const typography = {\n  fontFamily: {\n    primary: '\"ABCFavoritExtended\", sans-serif',\n  },\n\n  fontWeight: FONT_WEIGHTS,\n\n  fontSize: FONT_SIZES,\n\n  lineHeight: {\n    tight: 1.2,\n    normal: 1.5,\n    relaxed: 1.75,\n  },\n} as const;\n\n","/** @jsxImportSource @emotion/react */\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React, { ReactNode } from \"react\";\nimport Spinner from \"../Spinner/Spinner\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\n\ntype VariantName = \"primary\" | \"secondary\" | \"outline\";\n\nexport enum Variant {\n  Primary = \"primary\",\n  Secondary = \"secondary\",\n  Outline = \"outline\",\n}\n\ninterface VariantStyle {\n  background: string;\n  color?: string;\n  border?: string;\n}\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  label: string;\n  variant?: VariantName;\n  disabled?: boolean;\n  selected?: boolean;\n  icon?: ReactNode;\n  loading?: boolean;\n  className?: string;\n}\n\nconst VARIANTS: Record<VariantName, VariantStyle> = {\n  primary: {\n    background: colors.gradients.gradient1,\n    color: colors.baseColors.white1,\n  },\n  secondary: {\n    background: colors.baseColors.primaryPurple,\n    color: colors.baseColors.white1,\n  },\n  outline: {\n    background: colors.backgrounds.transparent,\n    border: \"1px solid rgba(70, 70, 74, 0.10)\",\n    color: \"#0E1116D9\",\n  },\n};\n\nconst StyledButton = styled.button<ButtonProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  border-radius: 100px;\n  font-weight: ${typography.fontWeight.medium};\n  font-family: ${typography.fontFamily.primary};\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 336px;\n\n  span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 8px;\n  }\n\n  ${({ variant = \"primary\", disabled, selected }) => {\n    const { background, color, border } = VARIANTS[variant];\n    return css`\n      background: ${background};\n      border: ${selected ? `2px solid ${colors.baseColors.white1}` : border || \"none\"};\n      color: ${color || colors.baseColors.white1};\n      opacity: ${disabled ? 0.5 : 1};\n      cursor: ${disabled ? \"not-allowed\" : \"pointer\"};\n      pointer-events: ${disabled ? \"none\" : \"auto\"};\n\n      &:focus-visible {\n        outline: 2px solid #0070f3;\n        outline-offset: 2px;\n      }\n    `;\n  }}\n`;\n\nconst Button: React.FC<ButtonProps> = ({\n  label,\n  icon,\n  loading,\n  disabled,\n  className,\n  ...rest\n}) => (\n  <StyledButton\n    label={\"\"}\n    disabled={disabled || loading}\n    className={className}\n    {...rest}\n  >\n    {loading ? (\n      <Spinner />\n    ) : (\n      <>\n        {icon && <span>{icon}</span>}\n        {label}\n      </>\n    )}\n  </StyledButton>\n);\n\nexport default Button;\n","/**\n * Color utility functions for the design system\n */\n\nexport type TOpacity = number; // 0-100\nexport type TColor = string; // Hex color with alpha channel\n\n/**\n * Converts a hex color to a hex color with alpha channel\n * @param hexColor - Hex color string (e.g., \"#6D65DA\" or \"6D65DA\")\n * @param opacity - Opacity value from 0-100\n * @returns Hex color with alpha channel (e.g., \"#6D65DAB3\" for 70% opacity)\n * @throws Error if hex color is invalid\n */\nexport function getOpacity(hexColor: string, opacity: TOpacity): TColor {\n  const hex = hexColor.trim().replace(/^#/, \"\");\n  \n  if (!/^[\\da-fA-F]{6}$/.test(hex)) {\n    throw new Error(`Invalid hex color: ${hexColor}`);\n  }\n\n  const opacityFraction = Math.round((opacity / 100) * 255);\n  const alphaHex = opacityFraction.toString(16).padStart(2, \"0\");\n\n  return `#${hex}${alphaHex}`;\n}\n\n","import { css } from \"@emotion/react\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\nimport { getOpacity } from \"../../utils/colorHelpers\";\n\nexport const defaultPadding = \"9px 17px\";\nexport const focusedPadding = \"8px 16px\";\n\nexport const baseInputStyles = css`\n  border-radius: 10px;\n  border: 1px solid ${colors.baseColors.grey7};\n  padding: ${defaultPadding};\n  color: ${getOpacity(colors.baseColors.darkBlue3, 80)};\n  background-color: ${colors.baseColors.white1};\n  font-weight: ${typography.fontWeight.regular};\n  cursor: text;\n  transition: border-color 0.2s ease;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ${colors.baseColors.grey3};\n  }\n\n  &:hover:not(:disabled) {\n    cursor: text;\n  }\n\n  &:focus {\n    outline: none;\n    border-width: 2px;\n    border-color: ${colors.baseColors.primaryPurple};\n    padding: ${focusedPadding};\n  }\n\n  &:disabled {\n    background-color: ${colors.baseColors.grey7};\n    cursor: not-allowed;\n  }\n`;\n\nexport const errorStyles = css`\n  border-width: 2px;\n  border-color: ${colors.accents.error};\n  padding: ${focusedPadding};\n\n  &:focus {\n    border-width: 2px;\n    border-color: ${colors.accents.error};\n    padding: ${focusedPadding};\n  }\n`;\n\nexport const warningStyles = css`\n  border-width: 2px;\n  border-color: ${colors.accents.warning};\n  padding: ${focusedPadding};\n\n  &:focus {\n    border-width: 2px;\n    border-color: ${colors.accents.warning};\n    padding: ${focusedPadding};\n  }\n`;\n\n","import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { baseInputStyles, errorStyles, warningStyles } from \"../shared/inputStyles\";\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  className?: string;\n  error?: boolean;\n  warning?: boolean;\n}\n\nconst Input: React.FC<InputProps> = ({ className, error, warning, ...rest }) => {\n  return <StyledInput className={className} error={error} warning={warning} {...rest} />;\n};\n\nexport default Input;\n\nconst StyledInput = styled.input<InputProps>`\n  ${baseInputStyles}\n\n  ${({ error }) => error && errorStyles}\n  ${({ warning }) => warning && warningStyles}\n`;","import React from \"react\";\n\nexport interface LabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  className?: string;\n  htmlFor?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ className, htmlFor, children, ...rest }) => {\n  return (\n    <label className={className} htmlFor={htmlFor} {...rest}>\n      {children}\n    </label>\n  );\n};\n\nexport default Label;\n\n","import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { baseInputStyles, errorStyles, warningStyles } from \"../shared/inputStyles\";\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  className?: string;\n  error?: boolean;\n  warning?: boolean;\n}\n\nconst Textarea: React.FC<TextareaProps> = ({ className, error, warning, ...rest }) => {\n  return <StyledTextarea className={className} error={error} warning={warning} {...rest} />;\n};\n\nexport default Textarea;\n\nconst StyledTextarea = styled.textarea<TextareaProps>`\n  ${baseInputStyles}\n  resize: vertical;\n  min-height: 80px;\n  font-family: inherit;\n\n  ${({ error }) => error && errorStyles}\n  ${({ warning }) => warning && warningStyles}\n`;\n\n","import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography, FONT_SIZES } from \"../../tokens/typography\";\n\ntype FontSizeKey = keyof typeof FONT_SIZES;\n\nexport interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"fontSize\"> {\n  children: React.ReactNode;\n  selected?: boolean;\n  fontSize?: FontSizeKey;\n  className?: string;\n}\n\ninterface StyledTabProps {\n  selected?: boolean;\n  fontSize: FontSizeKey;\n}\n\nconst Tab: React.FC<TabProps> = ({\n  children,\n  selected,\n  fontSize = \"m\",\n  className,\n  ...rest\n}) => {\n  return (\n    <StyledTab\n      className={className}\n      selected={selected}\n      fontSize={fontSize}\n      {...rest}\n    >\n      {children}\n    </StyledTab>\n  );\n};\n\nexport default Tab;\n\nconst StyledTab = styled.div<StyledTabProps>`\n  display: inline-block;\n  padding: 8px 16px;\n  user-select: none;\n  font-size: ${({ fontSize }) => `${typography.fontSize[fontSize]}px`};\n  position: relative;\n  transition: border-color 0.2s ease;\n  cursor: pointer;\n\n  ${({ selected }) =>\n    selected &&\n    `\n    &::after {\n      content: '';\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      height: 3px;\n      background-color: ${colors.baseColors.primaryGreen};\n    }\n  `}\n`;\n\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\n\nexport interface HelperTextProps {\n  error?: boolean;\n  warning?: boolean;\n  children: React.ReactNode;\n}\n\nexport const HelperText = styled.div<HelperTextProps>`\n  margin-top: 4px;\n  font-size: ${typography.fontSize.xs}px;\n  color: ${({ error, warning }) => {\n    if (error) return colors.accents.error;\n    if (warning) return colors.accents.warning;\n    return colors.baseColors.grey3;\n  }};\n`;\n\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Input, { InputProps } from \"../../atoms/Input\";\nimport Label from \"../../atoms/Label\";\nimport { HelperText } from \"../../atoms/HelperText\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\n\nexport interface FormFieldProps extends Omit<InputProps, \"id\" | \"onInput\" | \"error\" | \"warning\"> {\n  id: string;\n  label: string;\n  helperText?: string;\n  error?: string;\n  warning?: string;\n  onInput?: (value: string) => void;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst FormField: React.FC<FormFieldProps> = ({\n  id,\n  label,\n  helperText,\n  error,\n  warning,\n  onInput,\n  onChange,\n  className,\n  ...inputProps\n}) => {\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (onInput) {\n      onInput(event.target.value);\n    }\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const displayText = error || warning || helperText;\n  const hasError = !!error;\n  const hasWarning = !!warning && !hasError;\n\n  return (\n    <FormFieldWrapper className={className}>\n      <Label htmlFor={id}>{label}</Label>\n      <Input\n        id={id}\n        onChange={handleChange}\n        error={hasError}\n        warning={hasWarning}\n        {...inputProps}\n      />\n      {displayText && (\n        <HelperText error={hasError} warning={hasWarning}>\n          {displayText}\n        </HelperText>\n      )}\n    </FormFieldWrapper>\n  );\n};\n\nconst FormFieldWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  \n  label {\n    margin-bottom: 8px;\n    color: ${colors.baseColors.darkBlue3};\n    font-size: ${typography.fontSize.m}px;\n  }\n`;\n\nexport default FormField;\n\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Textarea, { TextareaProps } from \"../../atoms/Textarea\";\nimport Label from \"../../atoms/Label\";\nimport { HelperText } from \"../../atoms/HelperText\";\nimport { colors } from \"../../tokens/colors\";\nimport { typography } from \"../../tokens/typography\";\n\nexport interface FormFieldTextareaProps extends Omit<TextareaProps, \"id\" | \"onInput\" | \"error\" | \"warning\"> {\n  id: string;\n  label: string;\n  helperText?: string;\n  error?: string;\n  warning?: string;\n  onInput?: (value: string) => void;\n  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst FormFieldTextarea: React.FC<FormFieldTextareaProps> = ({\n  id,\n  label,\n  helperText,\n  error,\n  warning,\n  onInput,\n  onChange,\n  className,\n  ...textareaProps\n}) => {\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (onInput) {\n      onInput(event.target.value);\n    }\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const displayText = error || warning || helperText;\n  const hasError = !!error;\n  const hasWarning = !!warning && !hasError;\n\n  return (\n    <FormFieldWrapper className={className}>\n      <Label htmlFor={id}>{label}</Label>\n      <Textarea\n        id={id}\n        onChange={handleChange}\n        error={hasError}\n        warning={hasWarning}\n        {...textareaProps}\n      />\n      {displayText && (\n        <HelperText error={hasError} warning={hasWarning}>\n          {displayText}\n        </HelperText>\n      )}\n    </FormFieldWrapper>\n  );\n};\n\nconst FormFieldWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  \n  label {\n    margin-bottom: 8px;\n    color: ${colors.baseColors.darkBlue3};\n    font-size: ${typography.fontSize.m}px;\n  }\n`;\n\nexport default FormFieldTextarea;\n\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ndcloud-storybook",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "",
   "license": "ISC",
   "type": "module",