design-system-silkhaus 4.0.0-beta.combine-tailwind-config.1 → 4.0.1

package/dist/app/index.d.ts

@@ -1,6 +1,7 @@
 import { default as default_2 } from 'react';
 import { FC } from 'react';
 import { HTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { Placement } from '@floating-ui/react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
@@ -78,6 +79,24 @@ export declare type DropdownOption = {
     disabled?: boolean;
 };
 
+export declare const DropdownOption: ({ onClick, option, isSelected, showCheckbox, }: {
+    onClick: () => void;
+    option: DropdownOption;
+    isSelected: boolean;
+    showCheckbox?: boolean;
+}) => JSX_2.Element;
+
+export declare const DropdownOptions: ({ options, isMultiSelect, value, setValue, setIsOpen, onChange, selectAllOptionLabel, disableSelectAll, }: {
+    options: DropdownOption[];
+    isMultiSelect?: boolean;
+    value: DropdownProps["value"];
+    setValue: (value: DropdownProps["value"]) => void;
+    setIsOpen: (isOpen: boolean) => void;
+    onChange?: DropdownProps["onChange"];
+    selectAllOptionLabel?: string;
+    disableSelectAll?: boolean;
+}) => JSX_2.Element;
+
 export declare interface DropdownProps {
     /**
      * The options of the dropdown
@@ -94,7 +113,7 @@ export declare interface DropdownProps {
     /**
      * Callback when dropdown value is changed
      */
-    onChange?: (selectedOption: DropdownOption | DropdownOption[]) => void;
+    onChange?: (selectedOption: DropdownOption | DropdownOption[], isSelectAll?: boolean) => void;
     /**
      * Pass this callback function if you want to override the default selected value display text.
      * By default the dropdown will display the label from the selected option
@@ -142,10 +161,23 @@ export declare interface DropdownProps {
      * @default 'Close'
      */
     closeButtonLabel?: string;
+    /**
+     * Pass true to disable the select all option in multi-select dropdown
+     * @default false
+     */
+    disableSelectAll?: boolean;
+    /**
+     * The label for Select all option
+     * @default 'Select all'
+     */
+    selectAllOptionLabel?: string;
+    /**
+     * The selected value label to show when 'Select All' option is checked
+     * @default 'All'
+     */
+    allSelectedLabel?: string;
 }
 
-export declare const findOptionByValue: (value: string | string[] | undefined, options: DropdownOption[]) => DropdownOption | DropdownOption[] | undefined;
-
 export declare const MobileDropdown: FC<PropsWithChildren<DropdownProps>>;
 
 declare type OptionType = {

package/dist/app/index.js

@@ -1,279 +1,10 @@
-var J = Object.defineProperty, K = Object.defineProperties;
-var L = Object.getOwnPropertyDescriptors;
-var C = Object.getOwnPropertySymbols;
-var Q = Object.prototype.hasOwnProperty, X = Object.prototype.propertyIsEnumerable;
-var I = (s, e, a) => e in s ? J(s, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : s[e] = a, x = (s, e) => {
-  for (var a in e || (e = {}))
-    Q.call(e, a) && I(s, a, e[a]);
-  if (C)
-    for (var a of C(e))
-      X.call(e, a) && I(s, a, e[a]);
-  return s;
-}, k = (s, e) => K(s, L(e));
-import { j as d, p as Y, u as Z, o as _, i as O, s as ss, r as es, v as ds, d as as, e as ls, f as ts, g as rs, a as m, F as ns, A as is, h as os, D as cs, x as us, C as fs, l as xs, k as ms, n as ps } from "../ButtonsGroupSelector-sjBrndhv.js";
-import { w as ks } from "../ButtonsGroupSelector-sjBrndhv.js";
-import { useState as b } from "react";
-const hs = (s) => window.innerWidth < Y ? /* @__PURE__ */ d.jsx(R, x({}, s)) : /* @__PURE__ */ d.jsx(M, x({}, s));
-hs.displayName = "Dropdown";
-const M = ({
-  placement: s = "bottom-start",
-  trigger: e,
-  triggerContainerClassName: a,
-  disabled: l,
-  onOpenChange: o,
-  adjustHeight: n = !0,
-  adjustWidth: t = !0,
-  options: r,
-  getSelectedValueDisplayText: i = P,
-  placeholder: u,
-  value: f,
-  isMultiSelect: y,
-  onChange: w
-}) => {
-  const [p, N] = b(), h = typeof f == "undefined" ? p : f, c = typeof f == "undefined" ? N : () => {
-  }, [A, F] = b(!1), { refs: g, floatingStyles: B, context: j } = Z({
-    open: A,
-    onOpenChange: (v) => {
-      F(v), o && o(v);
-    },
-    middleware: [
-      _(8),
-      O({
-        crossAxis: s.includes("-"),
-        fallbackAxisSideDirection: "end"
-      }),
-      ss({ padding: 4 }),
-      es({
-        apply({ availableWidth: v, availableHeight: q, elements: z }) {
-          n && (z.floating.style.maxHeight = `${q - 4}px`), t && (z.floating.style.maxWidth = `${v - 4}px`);
-        }
-      })
-    ],
-    whileElementsMounted: os,
-    placement: s
-  }), E = ds(j), W = as(j), $ = ls(j), G = ts(j), { getReferenceProps: T, getFloatingProps: H } = rs([E, W, $, G]);
-  return e || (e = /* @__PURE__ */ d.jsx(
-    U,
-    {
-      selectedOption: D(h, r),
-      getSelectedValueDisplayText: i,
-      placeholder: u
-    }
-  )), l ? /* @__PURE__ */ d.jsx("div", { className: a, children: e }) : /* @__PURE__ */ d.jsxs(d.Fragment, { children: [
-    /* @__PURE__ */ d.jsx(
-      "div",
-      k(x({
-        className: m("ds-cursor-pointer", a),
-        ref: g.setReference
-      }, T()), {
-        children: e
-      })
-    ),
-    A && /* @__PURE__ */ d.jsx(ns, { children: /* @__PURE__ */ d.jsx(
-      "div",
-      k(x({
-        ref: g.setFloating,
-        style: B
-      }, H()), {
-        className: m(
-          "ds-z-[29999] ds-flex ds-min-w-[200px] ds-flex-col ds-gap-1 ds-rounded ds-bg-white ds-p-2 ds-shadow-md",
-          n && "ds-overflow-y-auto",
-          t && "ds-overflow-x-auto"
-        ),
-        children: /* @__PURE__ */ d.jsx(
-          V,
-          {
-            isMultiSelect: y,
-            options: r,
-            value: h,
-            setValue: c,
-            setIsOpen: F,
-            onChange: w
-          }
-        )
-      })
-    ) })
-  ] });
-};
-M.displayName = "DesktopDropdown";
-const R = ({
-  trigger: s,
-  triggerContainerClassName: e,
-  disabled: a,
-  onOpenChange: l,
-  getSelectedValueDisplayText: o = P,
-  placeholder: n,
-  value: t,
-  options: r,
-  isMultiSelect: i,
-  onChange: u,
-  closeButtonLabel: f = "Close"
-}) => {
-  const [y, w] = b(), p = typeof t == "undefined" ? y : t, N = typeof t == "undefined" ? w : () => {
-  }, [h, c] = b(!1);
-  return s || (s = /* @__PURE__ */ d.jsx(
-    U,
-    {
-      selectedOption: D(p, r),
-      getSelectedValueDisplayText: o,
-      placeholder: n
-    }
-  )), a ? /* @__PURE__ */ d.jsx("div", { className: e, children: s }) : /* @__PURE__ */ d.jsxs(d.Fragment, { children: [
-    /* @__PURE__ */ d.jsx(
-      "div",
-      {
-        className: e,
-        onClick: () => {
-          c(!0), l && l(!0);
-        },
-        children: s
-      }
-    ),
-    /* @__PURE__ */ d.jsx(
-      is,
-      {
-        animation: "slideUp",
-        show: h,
-        handleClose: () => {
-          c(!1), l && l(!1);
-        },
-        contentClassName: m("ds-absolute ds-mb-0 ds-w-full"),
-        className: "ds-z-[29999]",
-        children: /* @__PURE__ */ d.jsx(
-          S,
-          {
-            onClose: () => {
-              c(!1), l && l(!1);
-            },
-            closeButtonLabel: f,
-            children: /* @__PURE__ */ d.jsx(
-              V,
-              {
-                isMultiSelect: i,
-                options: r,
-                value: p,
-                setValue: N,
-                setIsOpen: c,
-                onChange: u
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
-};
-R.displayName = "MobileDropdown";
-const S = ({ onClose: s, closeButtonLabel: e, children: a }) => /* @__PURE__ */ d.jsxs("div", { className: "ds-mb-0 ds-flex ds-max-h-dvh ds-w-full ds-flex-col ds-bg-white", children: [
-  /* @__PURE__ */ d.jsxs("div", { className: "ds-flex ds-shrink-0 ds-items-center ds-justify-between ds-px-8 ds-py-4", children: [
-    /* @__PURE__ */ d.jsx(
-      "div",
-      {
-        onClick: s,
-        className: "ds-flex ds-size-5 ds-cursor-pointer ds-items-center ds-justify-center",
-        children: /* @__PURE__ */ d.jsx(fs, { className: "ds-size-4" })
-      }
-    ),
-    /* @__PURE__ */ d.jsx("div", { className: "ds-size-5" })
-  ] }),
-  /* @__PURE__ */ d.jsx("div", { className: "ds-grow ds-overflow-y-auto ds-p-4 ds-text-xSmallCalloutRegular", children: a }),
-  /* @__PURE__ */ d.jsx("div", { className: "ds-px-8 ds-py-4", children: /* @__PURE__ */ d.jsx(
-    xs,
-    {
-      buttonClassName: "ds-py-3",
-      onClick: s,
-      children: e
-    }
-  ) })
-] });
-S.displayName = "MobilePopoverContentWrapper";
-const U = ({
-  selectedOption: s,
-  getSelectedValueDisplayText: e,
-  placeholder: a
-}) => {
-  const l = !s || Array.isArray(s) && s.length === 0 ? a || "" : e(s);
-  return /* @__PURE__ */ d.jsx(
-    cs,
-    {
-      color: "secondary",
-      endIcon: /* @__PURE__ */ d.jsx(us, { className: "ds-size-4" }),
-      buttonClassName: "ds-justify-between",
-      children: l
-    }
-  );
-}, V = ({
-  options: s,
-  isMultiSelect: e,
-  value: a,
-  setValue: l,
-  setIsOpen: o,
-  onChange: n
-}) => s && s.map((t) => /* @__PURE__ */ d.jsx(
-  js,
-  {
-    onClick: () => {
-      let r;
-      if (e) {
-        const i = a || [];
-        i.includes(t.value) ? r = i.filter((u) => u !== t.value) : r = [...i, t.value];
-      } else
-        r = t.value, o(!1);
-      l(r), n && n(D(r, s));
-    },
-    option: t,
-    isSelected: Array.isArray(a) ? a.some((r) => r === t.value) : a === t.value,
-    showCheckbox: e
-  },
-  t.value
-)), js = ({
-  onClick: s,
-  option: e,
-  isSelected: a,
-  showCheckbox: l
-}) => /* @__PURE__ */ d.jsxs(
-  "div",
-  {
-    onClick: e.disabled ? void 0 : s,
-    className: m(
-      "ds-group ds-flex ds-min-h-[72px] ds-cursor-pointer ds-items-center ds-gap-4 ds-rounded ds-px-4 ds-py-2 ds-text-mediumSubHeadEmphasized hover:ds-bg-[#F6F8FC] ds-tablet:ds-min-h-[auto] ds-tablet:ds-gap-2 ds-tablet:ds-px-2 ds-desktop:ds-text-mediumFootnoteEmphasized",
-      !l && "ds-transition-[padding] ds-duration-300 hover:ds-px-4"
-    ),
-    children: [
-      e.thumbnailUrl && /* @__PURE__ */ d.jsx(
-        "img",
-        {
-          src: e.thumbnailUrl,
-          className: "ds-h-14 ds-w-14 ds-shrink-0 ds-rounded ds-object-cover group-hover:ds-pr-0 ds-tablet:ds-h-6 ds-tablet:ds-w-9 ds-tablet:ds-rounded-sm"
-        }
-      ),
-      e.icon,
-      /* @__PURE__ */ d.jsx(
-        "div",
-        {
-          className: m(
-            "ds-flex-grow",
-            !l && "ds-transition-[padding] ds-duration-300 group-hover:ds-pr-0 ds-tablet:ds-pr-4"
-          ),
-          children: e.label
-        }
-      ),
-      a && !l && /* @__PURE__ */ d.jsx(ms, { className: "ds-size-4 ds-shrink-0" }),
-      l && /* @__PURE__ */ d.jsx(
-        ps,
-        {
-          isChecked: a,
-          disabled: e.disabled
-        }
-      )
-    ]
-  }
-), D = (s, e) => Array.isArray(s) ? e.filter((a) => s.includes(a.value)) : e.find((a) => a.value === s), P = (s) => Array.isArray(s) ? s.map((e) => e.label).join(", ") : s.label;
+import { B as s, a as n, b as r, D as t, d as a, c as D, M as d } from "../index-BT5jeJCy.js";
 export {
-  cs as Button,
-  ks as ButtonsGroupSelector,
-  M as DesktopDropdown,
-  hs as Dropdown,
-  R as MobileDropdown,
-  D as findOptionByValue
+  s as Button,
+  n as ButtonsGroupSelector,
+  r as DesktopDropdown,
+  t as Dropdown,
+  a as DropdownOption,
+  D as DropdownOptions,
+  d as MobileDropdown
 };

package/dist/eslint-rules/tailwind/no-hardcoded-colors.js

@@ -0,0 +1,65 @@
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow hardcoded color values like hex, rgb, rgba, hsl, hsla',
+      recommended: false,
+    },
+    messages: {
+      hardcodedColor:
+        "Do not use hardcoded color value: '{{ color }}'. Use a tailwind class with design token name instead",
+    },
+    schema: [],
+  },
+
+  create(context) {
+    const COLOR_REGEX = new RegExp(
+      /#(?:[0-9a-fA-F]{3,8})\b|(rgb|hsl)a?\(\s*\d+\s*,\s*\d+%?\s*,\s*\d+%?(?:\s*,\s*(?:\d+(?:\.\d+)?|\.\d+))?\s*\)/,
+      'i',
+    );
+
+    function reportIfHardcodedColor(node, value) {
+      const match = value.match(COLOR_REGEX);
+      if (match) {
+        context.report({
+          node,
+          messageId: 'hardcodedColor',
+          data: {
+            color: match[0],
+          },
+        });
+      }
+    }
+
+    return {
+      Literal(node) {
+        if (typeof node.value === 'string') {
+          reportIfHardcodedColor(node, node.value);
+        }
+      },
+
+      JSXAttribute(node) {
+        if (node.name && ['class', 'className', 'style'].includes(node.name.name) && node.value) {
+          if (node.value.type === 'Literal' && typeof node.value.value === 'string') {
+            reportIfHardcodedColor(node.value, node.value.value);
+          }
+
+          if (
+            node.value.type === 'JSXExpressionContainer' &&
+            node.value.expression &&
+            node.value.expression.type === 'Literal' &&
+            typeof node.value.expression.value === 'string'
+          ) {
+            reportIfHardcodedColor(node.value.expression, node.value.expression.value);
+          }
+        }
+      },
+
+      TemplateLiteral(node) {
+        node.quasis.forEach((quasi) => {
+          reportIfHardcodedColor(quasi, quasi.value.cooked || '');
+        });
+      },
+    };
+  },
+};

package/dist/eslint-rules/tailwind/no-restricted-tokens.js

@@ -0,0 +1,79 @@
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Restrict listed names in tailwind tokens',
+      recommended: false,
+    },
+    messages: {
+      disallowedToken:
+        "Do not use '{{ token }}' in token names. Use a semantic design token name instead.",
+    },
+    schema: [],
+  },
+
+  create(context) {
+    const RESTRICTED_TOKENS = [
+      'white',
+      'black',
+      'red',
+      'green',
+      'grey',
+      'gray',
+      'eggplant',
+      'carrot',
+      'teal',
+      'mustard',
+    ];
+
+    const regex = new RegExp(`\\b(${RESTRICTED_TOKENS.join('|')})\\b`, 'i');
+
+    function reportIfTokenUsed(node, value) {
+      const match = regex.exec(value);
+      if (match) {
+        context.report({
+          node,
+          messageId: 'disallowedToken',
+          data: {
+            token: match[1],
+          },
+        });
+      }
+    }
+
+    return {
+      Literal(node) {
+        if (typeof node.value === 'string') {
+          reportIfTokenUsed(node, node.value);
+        }
+      },
+      JSXAttribute(node) {
+        if (
+          node.name &&
+          ['class', 'className', 'style'].includes(node.name.name) &&
+          node.value &&
+          node.value.type === 'Literal' &&
+          typeof node.value.value === 'string'
+        ) {
+          reportIfTokenUsed(node.value, node.value.value);
+        }
+
+        // Also handle JSXExpressionContainer e.g. className={"my-class red-text"}
+        if (
+          node.value &&
+          node.value.type === 'JSXExpressionContainer' &&
+          node.value.expression &&
+          node.value.expression.type === 'Literal' &&
+          typeof node.value.expression.value === 'string'
+        ) {
+          reportIfTokenUsed(node.value.expression, node.value.expression.value);
+        }
+      },
+      TemplateLiteral(node) {
+        node.quasis.forEach((quasi) => {
+          reportIfTokenUsed(quasi, quasi.value.cooked || '');
+        });
+      },
+    };
+  },
+};