@krrli/cm-designsystem 1.34.12 → 1.35.0

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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krrli/cm-designsystem",
   "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
-  "version": "1.34.12",
+  "version": "1.35.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,10 +19,12 @@
       "types": "./dist/tailwind.preset.d.ts",
       "import": "./dist/tailwind.preset.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./base.css": "./src/base.css"
   },
   "files": [
     "dist",
+    "dist/styles.css",
     "src/base.css"
   ],
   "sideEffects": false,