@local-logic/design-system 0.7.7 → 0.7.9

package/dist/icons/components/Icon/index.d.ts

@@ -1,5 +1,4 @@
 import { default as React, HTMLAttributes } from 'react';
-
 import * as icons from "../../assets";
 export type IconName = keyof typeof icons;
 export interface Props extends HTMLAttributes<HTMLDivElement> {

package/dist/icons/components/StorybookIconList/index.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { IconName } from '../../index';
 import { Props as IconProps } from '../Icon';
-
 export declare const argTypes: {
     icons: {
         control: boolean;

package/dist/icons/components/StorybookIconList/index.stories.d.ts

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react';
 import { Icon, IconName } from '../../index';
-
 declare const _default: Meta<typeof Icon>;
 export default _default;
 export declare const Arrows: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, {

package/dist/icons/components/StorybookIconList/lists/arrows.d.ts

@@ -1,4 +1,3 @@
 import { IconName } from '../../../index';
-
 export declare const icons: IconName[];
 //# sourceMappingURL=arrows.d.ts.map

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './icons';
+export * from './ui';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,MAAM,CAAC"}

package/dist/ui/components/Button/index.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface ButtonProps {
+    children?: React.ReactNode;
+    className?: string;
+    variant?: "primary" | "secondary" | "ghost";
+    size?: "small" | "medium" | "large";
+    Icon?: React.ElementType;
+    inverse?: boolean;
+    isDisabled?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC5C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,MAAM,uFAkClB,CAAC"}

package/dist/ui/components/Button/index.stories.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { Meta } from '@storybook/react';
+import { Button } from './index';
+declare const _default: Meta<typeof Button>;
+export default _default;
+export declare const All: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('./index').ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Primary: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('./index').ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Secondary: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('./index').ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Ghost: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('./index').ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PrimaryIcon: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('./index').ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SecondaryIcon: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('./index').ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const GhostIcon: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('./index').ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=index.stories.d.ts.map

package/dist/ui/components/Button/index.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/Button/index.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAW,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;wBAsB5B,IAAI,CAAC,OAAO,MAAM,CAAC;AApBxB,wBAoByB;AAIzB,eAAO,MAAM,GAAG,6JAAoB,CAAC;AAiDrC,eAAO,MAAM,OAAO,6JAAoB,CAAC;AAQzC,eAAO,MAAM,SAAS,6JAAoB,CAAC;AAQ3C,eAAO,MAAM,KAAK,6JAAoB,CAAC;AASvC,eAAO,MAAM,WAAW,6JAAoB,CAAC;AAS7C,eAAO,MAAM,aAAa,6JAAoB,CAAC;AAS/C,eAAO,MAAM,SAAS,6JAAoB,CAAC"}

package/dist/ui/components/Button/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const button = "\n  group bg-transparent justify-center\n  text-lg font-medium no-underline\n  px-5 py-0 rounded-xl h-11\n  flex items-center gap-2 cursor-pointer\n  transition-all min-w-fit\n\n  outline-none border-none\n  disabled:pointer-events-none\n  data-[is-disabled=true]:pointer-events-none\n\n  data-[size=\"medium\"]:h-12\n  data-[size=\"large\"]:h-16\n\n  data-[variant=\"primary\"]:bg-primary-100\n  data-[variant=\"primary\"]:text-white\n  data-[variant=\"primary\"]:hover:bg-primary-200\n  data-[variant=\"primary\"]:disabled:bg-gray-250\n  data-[variant=\"primary\"]:data-[is-disabled=true]:bg-gray-250\n  data-[variant=\"primary\"]:data-[inverse=true]:bg-white\n  data-[variant=\"primary\"]:data-[inverse=true]:text-primary-100\n  data-[variant=\"primary\"]:data-[inverse=true]:hover:bg-white\n  data-[variant=\"primary\"]:data-[inverse=true]:hover:text-primary-200\n  data-[variant=\"primary\"]:data-[inverse=true]:disabled:bg-gray-200\n  data-[variant=\"primary\"]:data-[inverse=true]:disabled:text-white\n  data-[variant=\"primary\"]:data-[inverse=true]:data-[is-disabled=true]:bg-gray-200\n  data-[variant=\"primary\"]:data-[inverse=true]:data-[is-disabled=true]:text-white\n\n  data-[variant=\"secondary\"]:border\n  data-[variant=\"secondary\"]:border-solid\n  data-[variant=\"secondary\"]:border-gray-150\n  data-[variant=\"secondary\"]:text-primary-100\n  data-[variant=\"secondary\"]:hover:border-primary-50\n  data-[variant=\"secondary\"]:hover:text-primary-50\n  data-[variant=\"secondary\"]:disabled:text-gray-250\n  data-[variant=\"secondary\"]:disabled:border-gray-250\n  data-[variant=\"secondary\"]:data-[is-disabled=true]:text-gray-250\n  data-[variant=\"secondary\"]:data-[is-disabled=true]:border-gray-250\n  data-[variant=\"secondary\"]:data-[inverse=true]:text-white\n  data-[variant=\"secondary\"]:data-[inverse=true]:border-white\n\n  data-[variant=\"ghost\"]:text-primary-100\n  data-[variant=\"ghost\"]:hover:text-primary-50\n  data-[variant=\"ghost\"]:disabled:text-gray-250\n  data-[variant=\"ghost\"]:data-[is-disabled=true]:text-gray-250\n\n  data-[variant=\"ghost\"]:data-[inverse=true]:text-white\n";
+export declare const icon = "h-6 w-6";
+export declare const arrow = "h-3 w-3 text-black";
+//# sourceMappingURL=styles.d.ts.map

package/dist/ui/components/Button/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/Button/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,ulEA+ClB,CAAC;AAEF,eAAO,MAAM,IAAI,YAAY,CAAC;AAE9B,eAAO,MAAM,KAAK,uBAAuB,CAAC"}

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Button/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.tsx"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,185 @@
+import { jsxs as Z, jsx as u } from "react/jsx-runtime";
+import t, { createContext as $, forwardRef as x, useContext as B } from "react";
+const F = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("path", { d: "M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("path", { d: "M176,128,96,208V48Z", opacity: "0.2" }), /* @__PURE__ */ t.createElement("path", { d: "M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34ZM104,188.69V67.31L164.69,128Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("path", { d: "M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("path", { d: "M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("path", { d: "M178.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L170.34,128,93.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,178.83,130.83Z" }))
+  ]
+]), N = $({
+  color: "currentColor",
+  size: "1em",
+  weight: "regular",
+  mirrored: !1
+});
+var L = Object.defineProperty, s = Object.getOwnPropertySymbols, E = Object.prototype.hasOwnProperty, O = Object.prototype.propertyIsEnumerable, g = (e, a, r) => a in e ? L(e, a, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[a] = r, b = (e, a) => {
+  for (var r in a || (a = {}))
+    E.call(a, r) && g(e, r, a[r]);
+  if (s)
+    for (var r of s(a))
+      O.call(a, r) && g(e, r, a[r]);
+  return e;
+}, h = (e, a) => {
+  var r = {};
+  for (var i in e)
+    E.call(e, i) && a.indexOf(i) < 0 && (r[i] = e[i]);
+  if (e != null && s)
+    for (var i of s(e))
+      a.indexOf(i) < 0 && O.call(e, i) && (r[i] = e[i]);
+  return r;
+};
+const j = x((e, a) => {
+  const r = e, {
+    alt: i,
+    color: n,
+    size: l,
+    weight: d,
+    mirrored: o,
+    children: m,
+    weights: v
+  } = r, c = h(r, [
+    "alt",
+    "color",
+    "size",
+    "weight",
+    "mirrored",
+    "children",
+    "weights"
+  ]), p = B(N), {
+    color: z = "currentColor",
+    size: y,
+    weight: A = "regular",
+    mirrored: C = !1
+  } = p, P = h(p, [
+    "color",
+    "size",
+    "weight",
+    "mirrored"
+  ]);
+  return /* @__PURE__ */ t.createElement(
+    "svg",
+    b(b({
+      ref: a,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: l ?? y,
+      height: l ?? y,
+      fill: n ?? z,
+      viewBox: "0 0 256 256",
+      transform: o || C ? "scale(-1, 1)" : void 0
+    }, P), c),
+    !!i && /* @__PURE__ */ t.createElement("title", null, i),
+    m,
+    v.get(d ?? A)
+  );
+});
+j.displayName = "IconBase";
+const R = j;
+var V = Object.defineProperty, k = Object.defineProperties, I = Object.getOwnPropertyDescriptors, f = Object.getOwnPropertySymbols, S = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable, w = (e, a, r) => a in e ? V(e, a, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[a] = r, D = (e, a) => {
+  for (var r in a || (a = {}))
+    S.call(a, r) && w(e, r, a[r]);
+  if (f)
+    for (var r of f(a))
+      _.call(a, r) && w(e, r, a[r]);
+  return e;
+}, q = (e, a) => k(e, I(a));
+const M = x((e, a) => /* @__PURE__ */ t.createElement(R, q(D({ ref: a }, e), { weights: F })));
+M.displayName = "CaretRight";
+const G = `
+  group bg-transparent justify-center
+  text-lg font-medium no-underline
+  px-5 py-0 rounded-xl h-11
+  flex items-center gap-2 cursor-pointer
+  transition-all min-w-fit
+
+  outline-none border-none
+  disabled:pointer-events-none
+  data-[is-disabled=true]:pointer-events-none
+
+  data-[size="medium"]:h-12
+  data-[size="large"]:h-16
+
+  data-[variant="primary"]:bg-primary-100
+  data-[variant="primary"]:text-white
+  data-[variant="primary"]:hover:bg-primary-200
+  data-[variant="primary"]:disabled:bg-gray-250
+  data-[variant="primary"]:data-[is-disabled=true]:bg-gray-250
+  data-[variant="primary"]:data-[inverse=true]:bg-white
+  data-[variant="primary"]:data-[inverse=true]:text-primary-100
+  data-[variant="primary"]:data-[inverse=true]:hover:bg-white
+  data-[variant="primary"]:data-[inverse=true]:hover:text-primary-200
+  data-[variant="primary"]:data-[inverse=true]:disabled:bg-gray-200
+  data-[variant="primary"]:data-[inverse=true]:disabled:text-white
+  data-[variant="primary"]:data-[inverse=true]:data-[is-disabled=true]:bg-gray-200
+  data-[variant="primary"]:data-[inverse=true]:data-[is-disabled=true]:text-white
+
+  data-[variant="secondary"]:border
+  data-[variant="secondary"]:border-solid
+  data-[variant="secondary"]:border-gray-150
+  data-[variant="secondary"]:text-primary-100
+  data-[variant="secondary"]:hover:border-primary-50
+  data-[variant="secondary"]:hover:text-primary-50
+  data-[variant="secondary"]:disabled:text-gray-250
+  data-[variant="secondary"]:disabled:border-gray-250
+  data-[variant="secondary"]:data-[is-disabled=true]:text-gray-250
+  data-[variant="secondary"]:data-[is-disabled=true]:border-gray-250
+  data-[variant="secondary"]:data-[inverse=true]:text-white
+  data-[variant="secondary"]:data-[inverse=true]:border-white
+
+  data-[variant="ghost"]:text-primary-100
+  data-[variant="ghost"]:hover:text-primary-50
+  data-[variant="ghost"]:disabled:text-gray-250
+  data-[variant="ghost"]:data-[is-disabled=true]:text-gray-250
+
+  data-[variant="ghost"]:data-[inverse=true]:text-white
+`, H = "h-6 w-6", J = "h-3 w-3 text-black", K = t.forwardRef(
+  ({
+    children: e,
+    className: a = "",
+    variant: r = "primary",
+    size: i = "small",
+    Icon: n,
+    isDisabled: l = !1,
+    inverse: d = !1,
+    onClick: o
+  }, m) => /* @__PURE__ */ Z(
+    "button",
+    {
+      onClick: (c) => {
+        o && o(c);
+      },
+      className: `${G} ${a}`,
+      disabled: l,
+      "data-variant": r,
+      "data-size": i,
+      "data-inverse": d,
+      children: [
+        n && /* @__PURE__ */ u(n, { className: H }),
+        e,
+        n && r === "ghost" && /* @__PURE__ */ u(M, { className: J })
+      ]
+    }
+  )
+);
+K.displayName = "Button";
+export {
+  K as Button
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@local-logic/design-system",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "author": "Local Logic",
   "publishConfig": {
     "access": "public"
@@ -55,43 +55,44 @@
   },
   "devDependencies": {
     "@local-logic/eslint-config": "*",
-    "@storybook/addon-actions": "^8.1.5",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-themes": "^8.1.5",
-    "@storybook/blocks": "^8.1.5",
-    "@storybook/builder-vite": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-vite": "^8.1.5",
+    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-themes": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/builder-vite": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
     "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.7.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-plugin-html": "^8.1.1",
-    "eslint-plugin-import": "^2.29.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
+    "eslint-plugin-html": "^8.1.2",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-storybook": "^0.8.0",
     "jestconfig": "*",
-    "postcss": "^8.4.38",
-    "prettier": "^3.3.0",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.0.9",
-    "tailwindcss": "^3.4.3",
+    "storybook": "^8.3.6",
+    "tailwindcss": "^3.4.14",
     "tsconfig": "*",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.4.6",
-    "vite-plugin-dts": "^3.9.1",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.6.0"
+    "vitest": "^2.1.3"
   },
   "dependencies": {
-    "glob": "^10.4.1"
+    "@phosphor-icons/react": "^2.1.7",
+    "glob": "^11.0.0"
   }
 }