@krrli/cm-designsystem 1.34.13 → 1.35.1

package/dist/components/form/Form.d.ts

@@ -33,23 +33,19 @@ declare const formStyles: import('tailwind-variants').TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 type FormVariants = VariantProps<typeof formStyles>;
 interface FormProps extends FormVariants {
-    children?: React.ReactNode;
-}
-export declare const Form: React.FC<FormProps> & {
-    Fields: typeof FormFields;
-    Action: typeof FormAction;
-};
-export declare function FormFields({ children }: {
-    children: React.ReactNode;
-}): React.ReactNode;
-export declare namespace FormFields {
-    var displayName: string;
-}
-export declare function FormAction({ children }: {
-    children: React.ReactElement;
-}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-export declare namespace FormAction {
-    var displayName: string;
+    /**
+     * Form fields
+     */
+    fields: React.ReactNode;
+    /**
+     * Submit button
+     */
+    action: React.ReactElement;
+    /**
+     * Submit handler
+     */
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
 }
+export declare const Form: React.FC<FormProps>;
 export {};
 //# sourceMappingURL=Form.d.ts.map

package/dist/components/form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAKd,CAAC;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AAEpD,UAAU,SAAU,SAAQ,YAAY;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,MAAM,EAAE,OAAO,UAAU,CAAC;IAC1B,MAAM,EAAE,OAAO,UAAU,CAAC;CA0B3B,CAAC;AAGF,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,mBAErE;yBAFe,UAAU;;;AAK1B,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,0EAExE;yBAFe,UAAU"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAKd,CAAC;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AAEpD,UAAU,SAAU,SAAQ,YAAY;IACtC;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAcpC,CAAC"}

package/dist/components/form/Form.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as RadixForm from "@radix-ui/react-form";
-import React from "react";
 import { tv } from "tailwind-variants";
 const formStyles = tv({
   slots: {
@@ -8,38 +7,18 @@ const formStyles = tv({
     fields: ["gap-4", "flex", "flex-col"]
   }
 });
-const Form = (props) => {
-  const { base, fields } = formStyles(props);
-  let fieldElements = null;
-  let actionElement = null;
-  React.Children.forEach(props.children, (child) => {
-    if (!React.isValidElement(child)) return;
-    switch (child.type) {
-      case FormFields:
-        fieldElements = child;
-        break;
-      case FormAction:
-        actionElement = child;
-        break;
-    }
-  });
-  return /* @__PURE__ */ jsxs(RadixForm.Root, { className: base(), children: [
-    /* @__PURE__ */ jsx("div", { className: fields(), children: fieldElements }),
-    /* @__PURE__ */ jsx(RadixForm.Submit, { asChild: true, children: actionElement })
+const Form = ({
+  fields,
+  action,
+  onSubmit,
+  ...variantProps
+}) => {
+  const { base, fields: fieldsClass } = formStyles(variantProps);
+  return /* @__PURE__ */ jsxs(RadixForm.Root, { className: base(), onSubmit, children: [
+    /* @__PURE__ */ jsx("div", { className: fieldsClass(), children: fields }),
+    /* @__PURE__ */ jsx(RadixForm.Submit, { asChild: true, children: action })
   ] });
 };
-FormFields.displayName = "FormField";
-function FormFields({ children }) {
-  return children;
-}
-FormAction.displayName = "ModalActions";
-function FormAction({ children }) {
-  return children;
-}
-Form.Fields = FormFields;
-Form.Action = FormAction;
 export {
-  Form,
-  FormAction,
-  FormFields
+  Form
 };

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/index.js

@@ -3,7 +3,7 @@ import { BrandingGallery } from "./components/branding/BrandingGallery.js";
 import { Button } from "./components/button/Button.js";
 import { ColorDoc } from "./components/color/ColorDoc.js";
 import { FileUpload } from "./components/file-upload/FileUpload.js";
-import { Form, FormAction, FormFields } from "./components/form/Form.js";
+import { Form } from "./components/form/Form.js";
 import { IconButton } from "./components/icon-button/IconButton.js";
 import { IconBase } from "./components/icons/IconBase.js";
 import { ArrowDown } from "./components/icons/generated/ArrowDown.js";
@@ -75,8 +75,6 @@ export {
   Eye,
   FileUpload,
   Form,
-  FormAction,
-  FormFields,
   Fullscreen,
   Heading,
   HeartFilled,

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.34.13",
+  "version": "1.35.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",