@kickstartds/ds-agency-premium 1.6.71--canary.45.1774.0 → 1.6.71--canary.45.1776.0

package/dist/components/event-filter/event-filter.css

@@ -0,0 +1,27 @@
+.dsa-event-filter {
+  border-radius: var(--ks-border-radius-card);
+  border: var(--ks-border-width-default) solid var(--ks-border-color-card);
+  padding: var(--ks-spacing-inset-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-m);
+}
+.dsa-event-filter__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-xs);
+}
+.dsa-event-filter__topic {
+  font: var(--dsa-topic--font);
+  font-weight: var(--dsa-topic--font-weight);
+}
+.dsa-event-filter__categories {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-xs);
+}
+.dsa-event-filter__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-s);
+}

package/dist/components/event-filter/event-filter.schema.dereffed.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-filter.schema.json",
+  "title": "Event Filter",
+  "type": "object",
+  "properties": {
+    "datePicker": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "Title for the date picker",
+          "default": "Find Appointment"
+        },
+        "dateFromInput": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "Label for the date-from input",
+              "default": "From"
+            },
+            "placeholder": {
+              "type": "string",
+              "description": "Placeholder text for the date-from input",
+              "default": "Select a date"
+            }
+          },
+          "additionalProperties": false
+        },
+        "dateToInput": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "Label for the date-to input",
+              "default": "To"
+            },
+            "placeholder": {
+              "type": "string",
+              "description": "Placeholder text for the date-to input",
+              "default": "Select a date"
+            }
+          },
+          "additionalProperties": false
+        },
+        "toggle": {
+          "type": "boolean",
+          "description": "Toggle to enable or disable the date picker",
+          "default": true
+        }
+      },
+      "additionalProperties": false
+    },
+    "categories": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "Title for the categories filter",
+          "default": "Categories"
+        },
+        "categoryCheckboxes": {
+          "type": "array",
+          "title": "Label",
+          "description": "List of categories to filter appointments",
+          "items": {
+            "type": "string",
+            "description": "Category name"
+          }
+        },
+        "toggle": {
+          "type": "boolean",
+          "description": "Toggle to enable or disable the category filter",
+          "default": true
+        }
+      },
+      "additionalProperties": false
+    },
+    "applyButton": {
+      "type": "object",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Label for the button",
+          "default": "Filter Appointments"
+        },
+        "onClick": {
+          "type": "string",
+          "description": "Function to call on button click"
+        }
+      },
+      "additionalProperties": false
+    },
+    "resetButton": {
+      "type": "object",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Label for the button",
+          "default": "Reset Filters"
+        },
+        "onClick": {
+          "type": "string",
+          "description": "Function to call on button click"
+        }
+      },
+      "additionalProperties": false
+    },
+    "type": {
+      "const": "event-filter"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/event-filter/event-filter.schema.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-filter.schema.json",
+  "title": "Event Filter",
+  "type": "object",
+  "properties": {
+    "datePicker": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "Title for the date picker",
+          "default": "Find Appointment"
+        },
+        "dateFromInput": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "Label for the date-from input",
+              "default": "From"
+            },
+            "placeholder": {
+              "type": "string",
+              "description": "Placeholder text for the date-from input",
+              "default": "Select a date"
+            }
+          }
+        },
+        "dateToInput": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "Label for the date-to input",
+              "default": "To"
+            },
+            "placeholder": {
+              "type": "string",
+              "description": "Placeholder text for the date-to input",
+              "default": "Select a date"
+            }
+          }
+        },
+        "toggle": {
+          "type": "boolean",
+          "description": "Toggle to enable or disable the date picker",
+          "default": true
+        }
+      }
+    },
+    "categories": {
+      "type": "object",
+
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "Title for the categories filter",
+          "default": "Categories"
+        },
+        "categoryCheckboxes": {
+          "type": "array",
+          "title": "Label",
+          "description": "List of categories to filter appointments",
+          "items": {
+            "type": "string",
+            "description": "Category name"
+          }
+        },
+        "toggle": {
+          "type": "boolean",
+          "description": "Toggle to enable or disable the category filter",
+          "default": true
+        }
+      }
+    },
+    "applyButton": {
+      "type": "object",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Label for the button",
+          "default": "Filter Appointments"
+        },
+        "onClick": {
+          "type": "string",
+          "description": "Function to call on button click"
+        }
+      }
+    },
+    "resetButton": {
+      "type": "object",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Label for the button",
+          "default": "Reset Filters"
+        },
+        "onClick": {
+          "type": "string",
+          "description": "Function to call on button click"
+        }
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/event-filter/index.d.ts

@@ -0,0 +1,79 @@
+/// <reference types="react" />
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * List of categories to filter appointments
+ */
+type Label = string[];
+interface EventFilterProps {
+    datePicker?: {
+        /**
+         * Title for the date picker
+         */
+        title?: string;
+        dateFromInput?: {
+            /**
+             * Label for the date-from input
+             */
+            label?: string;
+            /**
+             * Placeholder text for the date-from input
+             */
+            placeholder?: string;
+        };
+        dateToInput?: {
+            /**
+             * Label for the date-to input
+             */
+            label?: string;
+            /**
+             * Placeholder text for the date-to input
+             */
+            placeholder?: string;
+        };
+        /**
+         * Toggle to enable or disable the date picker
+         */
+        toggle?: boolean;
+    };
+    categories?: {
+        /**
+         * Title for the categories filter
+         */
+        title?: string;
+        categoryCheckboxes?: Label;
+        /**
+         * Toggle to enable or disable the category filter
+         */
+        toggle?: boolean;
+    };
+    applyButton?: {
+        /**
+         * Label for the button
+         */
+        label?: string;
+        /**
+         * Function to call on button click
+         */
+        onClick?: string;
+    };
+    resetButton?: {
+        /**
+         * Label for the button
+         */
+        label?: string;
+        /**
+         * Function to call on button click
+         */
+        onClick?: string;
+    };
+}
+declare const EventFilterContextDefault: import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const EventFilterContext: import("react").Context<import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const EventFilter: import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { EventFilterProps };
+export { EventFilterContextDefault, EventFilterContext, EventFilter };

package/dist/components/event-filter/index.js

@@ -0,0 +1,34 @@
+import "./event-filter.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { TextField } from '@kickstartds/form/lib/text-field';
+import { Checkbox } from '@kickstartds/form/lib/checkbox';
+import { Button } from '../button/index.js';
+import 'classnames';
+import '@kickstartds/base/lib/button';
+
+const EventFilterContextDefault = forwardRef(({ categories = {
+    title: "Categories",
+    toggle: true,
+}, datePicker = {
+    title: "Find Appointment",
+    toggle: true,
+}, applyButton = {
+    label: "Filter Appointments",
+}, resetButton = {
+    label: "Reset Filters",
+}, }, ref) => (jsxs("div", { className: "dsa-event-filter", ref: ref, children: [datePicker?.toggle && (jsxs("div", { className: "dsa-event-filter__item", children: [jsx("span", { className: "dsa-event-filter__topic", children: datePicker.title || "Find Appointment" }), jsxs("div", { className: "dsa-event-filter__date-picker", children: [jsx(TextField, { label: datePicker.dateFromInput.label || "From", placeholder: datePicker.dateFromInput.placeholder || "Select a date" }), jsx(TextField, { label: datePicker.dateToInput.label || "To", placeholder: datePicker.dateToInput.placeholder || "Select a date" })] })] })), categories?.toggle && (jsxs("div", { className: "dsa-event-filter__item", children: [jsx("span", { className: "dsa-event-filter__topic", children: categories?.title || "Categories" }), jsx("div", { className: "dsa-event-filter__categories", children: categories &&
+                        categories.categoryCheckboxes.length > 0 &&
+                        categories.categoryCheckboxes.map((category, index) => (jsx(Checkbox, { label: category }, index))) })] })), jsxs("div", { className: "dsa-event-filter__buttons", children: [jsx(Button, { size: "small", label: applyButton?.label || "Filter Appointments", variant: "primary", onClick: () => {
+                        // Handle button click
+                    } }), jsx(Button, { size: "small", label: resetButton?.label || "Reset Filters", onClick: () => {
+                        // Handle button click
+                    } })] })] })));
+const EventFilterContext = createContext(EventFilterContextDefault);
+const EventFilter = forwardRef((props, ref) => {
+    const Component = useContext(EventFilterContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+EventFilter.displayName = "EventFilter";
+
+export { EventFilter, EventFilterContext, EventFilterContextDefault };

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 10:12:27 GMT
+ * Generated on Thu, 03 Jul 2025 11:03:33 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -1576,6 +1576,45 @@
     },
     "screenshot": "img/screenshots/event-event-appointment--default.png"
   },
+  {
+    "id": "event-event-filter--default",
+    "group": "Event/ Event Filter",
+    "name": "Default",
+    "code": "<EventFilter\n  applyButton={{\n    label: 'Filter Appointments'\n  }}\n  categories={{\n    categoryCheckboxes: [\n      'All',\n      'Buyers',\n      'Sellers',\n      'Renters',\n      'Landlords',\n      'Tenants'\n    ],\n    title: 'Categories',\n    toggle: true\n  }}\n  datePicker={{\n    dateFromInput: {\n      label: 'From',\n      placeholder: 'Select a date'\n    },\n    dateToInput: {\n      label: 'To',\n      placeholder: 'Select a date'\n    },\n    title: 'Find Appointment',\n    toggle: true\n  }}\n  resetButton={{\n    label: 'Reset Filters'\n  }}\n/>",
+    "args": {
+      "datePicker": {
+        "title": "Find Appointment",
+        "dateFromInput": {
+          "label": "From",
+          "placeholder": "Select a date"
+        },
+        "dateToInput": {
+          "label": "To",
+          "placeholder": "Select a date"
+        },
+        "toggle": true
+      },
+      "categories": {
+        "title": "Categories",
+        "toggle": true,
+        "categoryCheckboxes": [
+          "All",
+          "Buyers",
+          "Sellers",
+          "Renters",
+          "Landlords",
+          "Tenants"
+        ]
+      },
+      "applyButton": {
+        "label": "Filter Appointments"
+      },
+      "resetButton": {
+        "label": "Reset Filters"
+      }
+    },
+    "screenshot": "img/screenshots/event-event-filter--default.png"
+  },
   {
     "id": "event-event-header--default",
     "group": "Event/ Event Header",

package/dist/global.css

@@ -587,7 +587,7 @@ h3 {
   --dsa-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
   --dsa-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
   --dsa-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
-  --dsa-check--size: 1.125em;
+  --dsa-check--size: 1.5em;
   --dsa-check--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
   --dsa-check_box--border-radius: min(var(--ks-border-radius-control), calc(var(--dsa-check--size) / 4));
   --dsa-check_radio--border-radius: var(--ks-border-radius-circle);
@@ -596,6 +596,7 @@ h3 {
   --dsa-check__label--font: var(--ks-font-interface-s);
   --dsa-check__label--font-weight: var(--ks-font-weight-regular);
   --dsa-check__label--color: var(--ks-text-color-interface);
+  --dsa-check__label--margin-left: 0.5em;
 }
 
 .c-form-field {
@@ -645,6 +646,9 @@ h3 {
   font-weight: var(--dsa-check__label--font-weight, var(--ks-font-weight-regular));
   color: var(--dsa-check__label--color, var(--ks-text-color-interface-interactive));
 }
+:root .c-form-check__label, [ks-inverted] .c-form-check__label, [ks-theme] .c-form-check__label {
+  margin-left: var(--dsa-check__label--margin-left, 0.5em);
+}
 :root .c-form-check--checkbox, [ks-inverted] .c-form-check--checkbox, [ks-theme] .c-form-check--checkbox {
   --c-form-check_box--border-radius: var(
     --dsa-check_box--border-radius,

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 10:12:29 GMT
+ * Generated on Thu, 03 Jul 2025 11:03:36 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 10:12:34 GMT
+ * Generated on Thu, 03 Jul 2025 11:03:39 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 10:12:32 GMT
+ * Generated on Thu, 03 Jul 2025 11:03:37 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 10:12:35 GMT
+ * Generated on Thu, 03 Jul 2025 11:03:41 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 10:12:27 GMT
+ * Generated on Thu, 03 Jul 2025 11:03:33 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 10:12:27 GMT
+ * Generated on Thu, 03 Jul 2025 11:03:34 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.71--canary.45.1774.0",
+  "version": "1.6.71--canary.45.1776.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {