jourma-react-lib 0.1.0

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react");function y({variant:i="filled",intent:e="normal",size:n="large",label:o,htmlType:r="button",className:c,disabled:s,children:l,...a}){const d=["button",`button--${i}`,`button--${e}`,`button--${n}`,c].filter(Boolean).join(" ");return t.jsx("button",{type:r,className:d,disabled:s,...a,children:l??o??"Button"})}function v({variant:i="filled",intent:e="normal",icon:n,htmlType:o="button",className:r,disabled:c,...s}){const l=["icon-button",`icon-button--${i}`,`icon-button--${e}`,r].filter(Boolean).join(" ");return t.jsx("button",{type:o,className:l,disabled:c,...s,children:t.jsx("span",{className:"icon-button__icon",children:n})})}const h=()=>t.jsxs("svg",{viewBox:"0 0 17 17",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-field__error-icon",children:[t.jsx("circle",{cx:"8.5",cy:"8.5",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),t.jsx("line",{x1:"8.5",y1:"4.5",x2:"8.5",y2:"9.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),t.jsx("circle",{cx:"8.5",cy:"12",r:"0.75",fill:"currentColor"})]}),b=x.forwardRef(({size:i="large",label:e,errorMessage:n,errorIcon:o,className:r,disabled:c,onFocus:s,onBlur:l,...a},d)=>{const[N,j]=x.useState(!1),m=x.useCallback(f=>{j(!0),s==null||s(f)},[s]),p=x.useCallback(f=>{j(!1),l==null||l(f)},[l]),w=c?"text-field--disabled":N?"text-field--focused":"",_=["text-field",`text-field--${i}`,w,r].filter(Boolean).join(" "),u=!!n;return i==="compact"?t.jsxs("div",{className:_,children:[t.jsxs("div",{className:"text-field__input-wrapper",children:[e&&t.jsx("label",{className:"text-field__label",children:e}),t.jsx("input",{ref:d,className:"text-field__input",disabled:c,onFocus:m,onBlur:p,...a}),u&&(o??t.jsx(h,{}))]}),u&&t.jsx("p",{className:"text-field__error",children:n})]}):t.jsxs("div",{className:_,children:[e&&t.jsx("label",{className:"text-field__label",children:e}),t.jsxs("div",{className:"text-field__input-wrapper",children:[t.jsx("input",{ref:d,className:"text-field__input",disabled:c,onFocus:m,onBlur:p,...a}),u&&(o??t.jsx(h,{}))]}),u&&t.jsx("p",{className:"text-field__error",children:n})]})});b.displayName="TextField";exports.Button=y;exports.IconButton=v;exports.TextField=b;

package/dist/index.mjs

@@ -0,0 +1,161 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { forwardRef as y, useState as k, useCallback as N } from "react";
+function C({
+  variant: i = "filled",
+  intent: e = "normal",
+  size: o = "large",
+  label: s,
+  htmlType: r = "button",
+  className: c,
+  disabled: l,
+  children: n,
+  ...d
+}) {
+  const u = [
+    "button",
+    `button--${i}`,
+    `button--${e}`,
+    `button--${o}`,
+    c
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      type: r,
+      className: u,
+      disabled: l,
+      ...d,
+      children: n ?? s ?? "Button"
+    }
+  );
+}
+function g({
+  variant: i = "filled",
+  intent: e = "normal",
+  icon: o,
+  htmlType: s = "button",
+  className: r,
+  disabled: c,
+  ...l
+}) {
+  const n = [
+    "icon-button",
+    `icon-button--${i}`,
+    `icon-button--${e}`,
+    r
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      type: s,
+      className: n,
+      disabled: c,
+      ...l,
+      children: /* @__PURE__ */ t("span", { className: "icon-button__icon", children: o })
+    }
+  );
+}
+const b = () => /* @__PURE__ */ a(
+  "svg",
+  {
+    viewBox: "0 0 17 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "text-field__error-icon",
+    children: [
+      /* @__PURE__ */ t(
+        "circle",
+        {
+          cx: "8.5",
+          cy: "8.5",
+          r: "7.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "line",
+        {
+          x1: "8.5",
+          y1: "4.5",
+          x2: "8.5",
+          y2: "9.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ t("circle", { cx: "8.5", cy: "12", r: "0.75", fill: "currentColor" })
+    ]
+  }
+), $ = y(
+  ({
+    size: i = "large",
+    label: e,
+    errorMessage: o,
+    errorIcon: s,
+    className: r,
+    disabled: c,
+    onFocus: l,
+    onBlur: n,
+    ...d
+  }, u) => {
+    const [w, m] = k(!1), p = N(
+      (x) => {
+        m(!0), l == null || l(x);
+      },
+      [l]
+    ), _ = N(
+      (x) => {
+        m(!1), n == null || n(x);
+      },
+      [n]
+    ), v = c ? "text-field--disabled" : w ? "text-field--focused" : "", h = [
+      "text-field",
+      `text-field--${i}`,
+      v,
+      r
+    ].filter(Boolean).join(" "), f = !!o;
+    return i === "compact" ? /* @__PURE__ */ a("div", { className: h, children: [
+      /* @__PURE__ */ a("div", { className: "text-field__input-wrapper", children: [
+        e && /* @__PURE__ */ t("label", { className: "text-field__label", children: e }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: u,
+            className: "text-field__input",
+            disabled: c,
+            onFocus: p,
+            onBlur: _,
+            ...d
+          }
+        ),
+        f && (s ?? /* @__PURE__ */ t(b, {}))
+      ] }),
+      f && /* @__PURE__ */ t("p", { className: "text-field__error", children: o })
+    ] }) : /* @__PURE__ */ a("div", { className: h, children: [
+      e && /* @__PURE__ */ t("label", { className: "text-field__label", children: e }),
+      /* @__PURE__ */ a("div", { className: "text-field__input-wrapper", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: u,
+            className: "text-field__input",
+            disabled: c,
+            onFocus: p,
+            onBlur: _,
+            ...d
+          }
+        ),
+        f && (s ?? /* @__PURE__ */ t(b, {}))
+      ] }),
+      f && /* @__PURE__ */ t("p", { className: "text-field__error", children: o })
+    ] });
+  }
+);
+$.displayName = "TextField";
+export {
+  C as Button,
+  g as IconButton,
+  $ as TextField
+};

package/dist/src/components/Button/Button.d.ts

@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes } from 'react';
+
+export type ButtonStyle = "filled" | "outlined" | "text";
+export type ButtonType = "normal" | "special" | "attention";
+export type ButtonSize = "large" | "medium" | "small";
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** Visual style of the button */
+    variant?: ButtonStyle;
+    /** Color type / intent */
+    intent?: ButtonType;
+    /** Size variant */
+    size?: ButtonSize;
+    /** Label text */
+    label?: string;
+    /** HTML button type attribute */
+    htmlType?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+}
+export declare function Button({ variant, intent, size, label, htmlType, className, disabled, children, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Button/Button.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Playground: Story;
+export declare const FilledNormal: Story;
+export declare const FilledAttention: Story;
+export declare const FilledSpecial: Story;
+export declare const OutlinedNormal: Story;
+export declare const OutlinedAttention: Story;
+export declare const OutlinedSpecial: Story;
+export declare const TextNormal: Story;
+export declare const TextAttention: Story;
+export declare const TextSpecial: Story;
+export declare const Disabled: Story;
+export declare const AllVariants: Story;

package/dist/src/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonStyle, ButtonType, ButtonSize } from './Button';

package/dist/src/components/IconButton/IconButton.d.ts

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export type IconButtonStyle = "filled" | "outlined";
+export type IconButtonIntent = "normal" | "special" | "attention" | "neutral";
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> {
+    /** Visual style */
+    variant?: IconButtonStyle;
+    /** Color type / intent */
+    intent?: IconButtonIntent;
+    /** Icon element (SVG or React node) */
+    icon: ReactNode;
+    /** Accessible label */
+    "aria-label": string;
+    /** HTML button type attribute */
+    htmlType?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+}
+export declare function IconButton({ variant, intent, icon, htmlType, className, disabled, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/IconButton/IconButton.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IconButton } from './IconButton';
+
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Playground: Story;
+export declare const FilledNormal: Story;
+export declare const FilledSpecial: Story;
+export declare const FilledAttention: Story;
+export declare const FilledNeutral: Story;
+export declare const OutlinedNormal: Story;
+export declare const Disabled: Story;
+export declare const AllVariants: Story;

package/dist/src/components/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton';
+export type { IconButtonProps, IconButtonStyle, IconButtonIntent, } from './IconButton';

package/dist/src/components/TextField/TextField.d.ts

@@ -0,0 +1,14 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+export type TextFieldSize = "large" | "compact";
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Size variant */
+    size?: TextFieldSize;
+    /** Label text */
+    label?: string;
+    /** Error message (shows error state when provided) */
+    errorMessage?: string;
+    /** Custom error icon (defaults to built-in exclamation circle) */
+    errorIcon?: ReactNode;
+}
+export declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/src/components/TextField/TextField.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TextField } from './TextField';
+
+declare const meta: Meta<typeof TextField>;
+export default meta;
+type Story = StoryObj<typeof TextField>;
+export declare const Playground: Story;
+export declare const Large: Story;
+export declare const Compact: Story;
+export declare const WithError: Story;
+export declare const CompactWithError: Story;
+export declare const Disabled: Story;
+export declare const DisabledCompact: Story;
+export declare const AllVariants: Story;

package/dist/src/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { TextField } from './TextField';
+export type { TextFieldProps, TextFieldSize } from './TextField';

package/dist/src/index.d.ts

@@ -0,0 +1,7 @@
+
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonStyle, ButtonType, ButtonSize } from './components/Button';
+export { IconButton } from './components/IconButton';
+export type { IconButtonProps, IconButtonStyle, IconButtonIntent } from './components/IconButton';
+export { TextField } from './components/TextField';
+export type { TextFieldProps, TextFieldSize } from './components/TextField';

package/dist/style.css

@@ -0,0 +1 @@
+:root{--jourma-color-action: #00ff9f;--jourma-color-action-special: #ff46ff;--jourma-color-action-attention: #ff3d48;--jourma-color-action-pressed: white;--jourma-color-text-on-action: #00322f;--jourma-color-text-on-action-attention: black;--jourma-color-text-on-action-special: black;--jourma-color-text-on-surface-focused: black;--jourma-color-text-on-surface: white;--jourma-color-text-action: #00ff9f;--jourma-color-text-attention: #ff3d48;--jourma-color-text-special: #ff46ff;--jourma-color-text-primary: white;--jourma-color-text-secondary: rgba(255, 255, 255, .8);--jourma-color-text-tertiary: rgba(255, 255, 255, .6);--jourma-color-disabled-surface: rgba(255, 255, 255, .2);--jourma-color-disabled-text: rgba(255, 255, 255, .3);--jourma-color-disabled-text-on-surface: rgba(0, 0, 0, .5);--jourma-color-disabled-stroke: rgba(255, 255, 255, .1);--jourma-color-surface: rgba(255, 255, 255, .07);--jourma-color-surface-pressed: rgba(255, 255, 255, .2);--jourma-color-surface-focused: rgba(255, 255, 255, .8);--jourma-color-placeholder-text: rgba(255, 255, 255, .4);--jourma-color-label-on-surface: rgba(255, 255, 255, .6);--jourma-color-label-on-surface-focused: rgba(0, 0, 0, .6);--jourma-color-disabled-surface-text-on-surface: rgba(0, 0, 0, .5);--jourma-color-white-10: rgba(255, 255, 255, .1);--jourma-color-white-30: rgba(255, 255, 255, .3);--jourma-spacing-xxs: 2px;--jourma-spacing-xs: 4px;--jourma-spacing-m: 16px;--jourma-button-padding-top-large: 13px;--jourma-button-padding-bottom-large: 15px;--jourma-button-padding-round-end-large: 24px;--jourma-button-padding-sharp-end-large: 22px;--jourma-button-padding-top-medium: 10px;--jourma-button-padding-bottom-medium: 12px;--jourma-button-padding-round-end-medium: 18px;--jourma-button-padding-sharp-end-medium: 16px;--jourma-button-padding-top-small: 8px;--jourma-button-padding-bottom-small: 10px;--jourma-button-padding-round-end-small: 15px;--jourma-button-padding-sharp-end-small: 12px;--jourma-field-gap: 8px;--jourma-field-padding-ends: 16px;--jourma-field-padding-top-large: 13px;--jourma-field-padding-bottom-large: 15px;--jourma-field-padding-top-compact: 14px;--jourma-field-padding-bottom-compact: 15px;--jourma-field-radius: 12px;--jourma-field-radius-compact: 8px;--jourma-radius-m: 24px}.button{display:inline-flex;align-items:center;justify-content:center;overflow:clip;border:none;background:none;padding:0;font-family:Bugrino,sans-serif;line-height:1.1;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-feature-settings:"dlig" 1}.button:not(:disabled){cursor:pointer}.button--filled{border-radius:0}.button--filled.button--large{border-bottom-left-radius:25px;border-top-left-radius:25px;padding:var(--jourma-button-padding-top-large) var(--jourma-button-padding-sharp-end-large) var(--jourma-button-padding-bottom-large) var(--jourma-button-padding-round-end-large);font-size:20px;font-weight:700}.button--filled.button--medium{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-medium) var(--jourma-button-padding-sharp-end-medium) var(--jourma-button-padding-bottom-medium) var(--jourma-button-padding-round-end-medium);font-size:20px;font-weight:700}.button--filled.button--small{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-small) var(--jourma-button-padding-sharp-end-small) var(--jourma-button-padding-bottom-small) var(--jourma-button-padding-round-end-small);font-size:18px;font-weight:700}.button--filled.button--normal{background-color:var(--jourma-color-action);color:var(--jourma-color-text-on-action)}.button--filled.button--attention{background-color:var(--jourma-color-action-attention);color:var(--jourma-color-text-on-action-attention)}.button--filled.button--special{background-color:var(--jourma-color-action-special);color:var(--jourma-color-text-on-action-special)}.button--filled:not(:disabled):active{background-color:var(--jourma-color-action-pressed);color:var(--jourma-color-text-on-surface-focused)}.button--filled:disabled{background-color:var(--jourma-color-disabled-surface);color:var(--jourma-color-disabled-text-on-surface);cursor:default}.button--outlined{background:transparent;border-style:solid;border-width:2px}.button--outlined.button--large{border-bottom-left-radius:25px;border-top-left-radius:25px;padding:var(--jourma-button-padding-top-large) var(--jourma-button-padding-sharp-end-large) var(--jourma-button-padding-bottom-large) var(--jourma-button-padding-round-end-large);font-size:20px;font-weight:500}.button--outlined.button--medium{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-medium) var(--jourma-button-padding-sharp-end-medium) var(--jourma-button-padding-bottom-medium) var(--jourma-button-padding-round-end-medium);font-size:20px;font-weight:500}.button--outlined.button--small{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-small) var(--jourma-button-padding-sharp-end-small) var(--jourma-button-padding-bottom-small) var(--jourma-button-padding-round-end-small);font-size:18px;font-weight:500}.button--outlined.button--normal{border-color:var(--jourma-color-action);color:var(--jourma-color-text-action)}.button--outlined.button--attention{border-color:var(--jourma-color-action-attention);color:var(--jourma-color-text-attention)}.button--outlined.button--special{border-color:var(--jourma-color-action-special);color:var(--jourma-color-text-special)}.button--outlined:not(:disabled):active{border-color:var(--jourma-color-action-pressed);color:var(--jourma-color-action-pressed)}.button--outlined:disabled{border-color:var(--jourma-color-disabled-stroke);color:var(--jourma-color-disabled-text);cursor:default}.button--text{background:transparent;border:none}.button--text.button--large{padding:var(--jourma-button-padding-top-large) var(--jourma-button-padding-sharp-end-large) var(--jourma-button-padding-bottom-large);font-size:20px;font-weight:500}.button--text.button--medium{padding:var(--jourma-button-padding-top-medium) var(--jourma-button-padding-sharp-end-medium) var(--jourma-button-padding-bottom-medium);font-size:20px;font-weight:500}.button--text.button--small{padding:var(--jourma-button-padding-top-small) var(--jourma-button-padding-sharp-end-small) var(--jourma-button-padding-bottom-small);font-size:18px;font-weight:500}.button--text.button--normal{color:var(--jourma-color-text-action)}.button--text.button--attention{color:var(--jourma-color-text-attention)}.button--text.button--special{color:var(--jourma-color-text-special)}.button--text:not(:disabled):active{color:var(--jourma-color-action-pressed)}.button--text:disabled{color:var(--jourma-color-disabled-text);cursor:default}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--jourma-radius-m);border:none;padding:0;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.icon-button:not(:disabled){cursor:pointer}.icon-button--filled.icon-button--normal{background-color:var(--jourma-color-action)}.icon-button--filled.icon-button--special{background-color:var(--jourma-color-action-special)}.icon-button--filled.icon-button--attention{background-color:var(--jourma-color-action-attention)}.icon-button--filled.icon-button--neutral{background-color:var(--jourma-color-white-10)}.icon-button--filled.icon-button--pressed{background-color:var(--jourma-color-action-pressed)}.icon-button--filled:disabled{background-color:var(--jourma-color-disabled-surface);cursor:default}.icon-button--outlined{background:transparent;border-style:solid;border-width:2px}.icon-button--outlined.icon-button--normal{border-color:var(--jourma-color-action)}.icon-button--outlined.icon-button--special{border-color:var(--jourma-color-action-special)}.icon-button--outlined.icon-button--attention{border-color:var(--jourma-color-action-attention)}.icon-button--outlined.icon-button--neutral{border-color:var(--jourma-color-white-30)}.icon-button--outlined.icon-button--pressed{border-color:var(--jourma-color-action-pressed)}.icon-button--outlined:disabled{border-color:var(--jourma-color-disabled-stroke);cursor:default}.icon-button__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.icon-button__icon>svg{width:100%;height:100%}.text-field{display:flex;flex-direction:column;align-items:flex-start;width:100%;font-family:Bugrino,sans-serif;font-feature-settings:"dlig" 1}.text-field--large{gap:var(--jourma-spacing-xs)}.text-field__label{font-size:17px;font-weight:500;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.text-field--large .text-field__label{color:var(--jourma-color-text-secondary)}.text-field--large.text-field--disabled .text-field__label{color:var(--jourma-color-disabled-text)}.text-field--compact .text-field__label{color:var(--jourma-color-label-on-surface);width:100px;flex-shrink:0}.text-field--compact.text-field--focused .text-field__label{color:var(--jourma-color-label-on-surface-focused)}.text-field--compact.text-field--disabled .text-field__label{color:var(--jourma-color-disabled-text)}.text-field__input-wrapper{display:flex;align-items:center;gap:var(--jourma-field-gap);width:100%;overflow:clip;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.text-field--large .text-field__input-wrapper{padding:var(--jourma-field-padding-top-large) var(--jourma-field-padding-ends) var(--jourma-field-padding-bottom-large);border-radius:var(--jourma-field-radius)}.text-field--compact .text-field__input-wrapper{padding:var(--jourma-field-padding-top-compact) var(--jourma-field-padding-ends) var(--jourma-field-padding-bottom-compact);border-radius:var(--jourma-field-radius-compact)}.text-field__input-wrapper{background-color:var(--jourma-color-surface);border:2px solid transparent}.text-field--pressed .text-field__input-wrapper{background-color:var(--jourma-color-surface-pressed)}.text-field--focused .text-field__input-wrapper{background-color:var(--jourma-color-surface-focused)}.text-field--disabled .text-field__input-wrapper{background-color:#00000003;border-color:var(--jourma-color-disabled-stroke)}.text-field__input{flex:1 0 0;min-width:0;background:none;border:none;outline:none;padding:0;font-family:inherit;font-feature-settings:inherit;line-height:1.1}.text-field--large .text-field__input{font-size:20px}.text-field--compact .text-field__input{font-size:17px}.text-field__input{color:var(--jourma-color-text-on-surface)}.text-field__input::placeholder{color:var(--jourma-color-placeholder-text)}.text-field--focused .text-field__input{color:var(--jourma-color-text-on-surface-focused)}.text-field--focused .text-field__input::placeholder{color:var(--jourma-color-disabled-text-on-surface)}.text-field--disabled .text-field__input{color:var(--jourma-color-disabled-text)}.text-field--disabled .text-field__input::placeholder{color:var(--jourma-color-disabled-text);opacity:.5}.text-field__error-icon{flex-shrink:0;width:17px;height:17px;color:var(--jourma-color-text-attention)}.text-field__error{font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.24px;color:var(--jourma-color-text-attention);width:100%}.text-field--large .text-field__error{padding-right:var(--jourma-spacing-m)}.text-field--compact .text-field__error{padding:var(--jourma-spacing-xxs) var(--jourma-spacing-m) var(--jourma-spacing-xs) var(--jourma-spacing-xs)}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from '../index'

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "jourma-react-lib",
+  "version": "0.1.0",
+  "description": "Jourma UI component library for React",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./styles.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/addon-interactions": "^8.6.18",
+    "@storybook/addon-onboarding": "^8.6.18",
+    "@storybook/blocks": "^8.6.18",
+    "@storybook/react": "^8.6.18",
+    "@storybook/react-vite": "^8.6.18",
+    "@storybook/test": "^8.6.18",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "storybook": "^8.6.18",
+    "typescript": "^6.0.2",
+    "vite": "^5.4.21",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "keywords": [
+    "jourma",
+    "ui",
+    "react",
+    "components"
+  ],
+  "license": "ISC"
+}