@krrli/cm-designsystem 1.35.0 → 1.35.1

package/dist/components/input/Input.d.ts

@@ -56,7 +56,9 @@ interface InputProps extends InputVariants {
     isRequired?: boolean;
     children?: React.ReactElement<IconBaseProps>;
     onChange: (value: string) => void;
+    value?: string;
+    defaultValue?: string;
 }
-export declare const Input: ({ type, isRequired, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: ({ type, isRequired, value: controlledValue, defaultValue, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Input.d.ts.map

package/dist/components/input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA8Bf,CAAC;AAEH,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,UAAW,SAAQ,aAAa;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,KAAK,GAAI,gCAInB,UAAU,4CA2CZ,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA8Bf,CAAC;AAEH,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,UAAW,SAAQ,aAAa;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,GAAI,sEAMnB,UAAU,4CAqDZ,CAAC"}

package/dist/components/input/Input.js

@@ -40,13 +40,17 @@ const inputStyles = tv({
 const Input = ({
   type = "text",
   isRequired = false,
+  value: controlledValue,
+  defaultValue = "",
   ...props
 }) => {
   const { base, controlContainer, control, message, icon } = inputStyles({
     hasIcon: !!props.children,
     ...props
   });
-  const [value, setValue] = useState("");
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
   return /* @__PURE__ */ jsxs(RadixForm.Field, { name: props.name, className: base(props), children: [
     /* @__PURE__ */ jsx(RadixForm.Label, { children: /* @__PURE__ */ jsx(Label, { size: "md", children: props.label }) }),
     /* @__PURE__ */ jsxs("div", { className: controlContainer(props), children: [
@@ -57,8 +61,14 @@ const Input = ({
           type,
           required: isRequired,
           placeholder: props.placeholder,
-          onChange: (e) => setValue(e.target.value),
-          onBlur: () => props.onChange(value)
+          value,
+          onChange: (e) => {
+            const newValue = e.target.value;
+            if (!isControlled) {
+              setInternalValue(newValue);
+            }
+            props.onChange(newValue);
+          }
         }
       ) }),
       props.children && React.cloneElement(props.children, { className: icon(props) })

package/dist/components/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2Bf,CAAC;AAEH,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,UAAW,SAAQ,aAAa;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,YAAY,CAAC;CA6C9B,CAAC;AAGF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEpE;yBAFe,SAAS;;;AAKzB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEvE;yBAFe,YAAY"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwCf,CAAC;AAEH,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,UAAW,SAAQ,aAAa;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,YAAY,CAAC;CA6C9B,CAAC;AAGF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEpE;yBAFe,SAAS;;;AAKzB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAEvE;yBAFe,YAAY"}

package/dist/components/modal/Modal.js

@@ -11,7 +11,8 @@ const modalStyles = tv({
       "fixed",
       "top-1/2",
       "left-1/2",
-      "w-123",
+      "w-[calc(100%-2rem)]",
+      "max-w-123",
       "-translate-x-1/2",
       "-translate-y-1/2",
       "rounded-2xl",
@@ -22,13 +23,25 @@ const modalStyles = tv({
       "justify-between",
       "rounded-t-2xl",
       "bg-violet-600",
-      "pt-6",
-      "pr-8",
-      "pb-6",
-      "pl-8",
+      "pt-4",
+      "pr-4",
+      "pb-4",
+      "pl-4",
+      "sm:pt-6",
+      "sm:pr-8",
+      "sm:pb-6",
+      "sm:pl-8",
       "text-white"
     ],
-    container: ["flex", "flex-col", "items-center", "gap-12", "p-8"],
+    container: [
+      "flex",
+      "flex-col",
+      "items-center",
+      "gap-8",
+      "p-4",
+      "sm:gap-12",
+      "sm:p-8"
+    ],
     actions: ["flex", "items-center", "gap-4", "w-full"]
   }
 });
@@ -52,7 +65,7 @@ const Modal = (props) => {
     /* @__PURE__ */ jsxs(RadixDialog.Content, { className: content(), children: [
       /* @__PURE__ */ jsxs(RadixDialog.Title, { className: title(), children: [
         /* @__PURE__ */ jsx(Heading, { as: "span", size: "3", children: props.title }),
-        /* @__PURE__ */ jsx(RadixDialog.Close, { children: /* @__PURE__ */ jsx(Cancel, {}) })
+        /* @__PURE__ */ jsx(RadixDialog.Close, { "aria-label": "Close modal", children: /* @__PURE__ */ jsx(Cancel, {}) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: container(), children: [
         modalBody,

package/dist/styles.css

@@ -576,10 +576,6 @@
     width: calc(var(--spacing) * 40);
   }
 
-  .w-123 {
-    width: calc(var(--spacing) * 123);
-  }
-
   .w-170 {
     width: calc(var(--spacing) * 170);
   }
@@ -588,6 +584,10 @@
     width: ` < spacing> ` ;
   }
 
+  .w-\[calc\(100\%-2rem\)\] {
+    width: calc(100% - 2rem);
+  }
+
   .w-auto {
     width: auto;
   }
@@ -600,6 +600,10 @@
     width: 100%;
   }
 
+  .max-w-123 {
+    max-width: calc(var(--spacing) * 123);
+  }
+
   .max-w-\[680px\] {
     max-width: 680px;
   }
@@ -716,8 +720,8 @@
     gap: calc(var(--spacing) * 6);
   }
 
-  .gap-12 {
-    gap: calc(var(--spacing) * 12);
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
   }
 
   .gap-16 {
@@ -1025,10 +1029,6 @@
     padding: calc(var(--spacing) * 4);
   }
 
-  .p-8 {
-    padding: calc(var(--spacing) * 8);
-  }
-
   .p-10 {
     padding: calc(var(--spacing) * 10);
   }
@@ -1081,10 +1081,6 @@
     padding-right: calc(var(--spacing) * 6);
   }
 
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
-
   .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
@@ -1125,10 +1121,6 @@
     padding-left: calc(var(--spacing) * 6);
   }
 
-  .pl-8 {
-    padding-left: calc(var(--spacing) * 8);
-  }
-
   .align-middle {
     vertical-align: middle;
   }
@@ -1748,6 +1740,30 @@
     .sm\:flex-row {
       flex-direction: row;
     }
+
+    .sm\:gap-12 {
+      gap: calc(var(--spacing) * 12);
+    }
+
+    .sm\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+
+    .sm\:pt-6 {
+      padding-top: calc(var(--spacing) * 6);
+    }
+
+    .sm\:pr-8 {
+      padding-right: calc(var(--spacing) * 8);
+    }
+
+    .sm\:pb-6 {
+      padding-bottom: calc(var(--spacing) * 6);
+    }
+
+    .sm\:pl-8 {
+      padding-left: calc(var(--spacing) * 8);
+    }
   }
 
   @media (min-width: 48rem) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krrli/cm-designsystem",
   "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
-  "version": "1.35.0",
+  "version": "1.35.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",