oneslash-design-system 1.1.14 → 1.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/components/iconButton.tsx +54 -66
  2. package/dist/components/iconButton.d.ts +6 -5
  3. package/dist/components/iconButton.jsx +47 -113
  4. package/dist/output.css +4 -10
  5. package/package.json +3 -3
package/components/iconButton.tsx CHANGED
@@ -1,84 +1,74 @@
1
1
  'use client';
2
- import React, { useState, useEffect, useCallback } from 'react';
3
- import * as HeroIcons from '@heroicons/react/24/outline';
2
+ import React, { useState } from 'react';
3
+ import * as HeroIcons24 from '@heroicons/react/24/outline';
4
+ import * as HeroIcons20 from '@heroicons/react/20/solid';
4
5
 
5
- interface IconButtonProps{
6
- variant: "contained" | "iconOnly";
7
- color: "primary" | "secondary";
6
+ interface IconButtonProps {
7
+ color: "primary" | "secondary" | "tertiary" | "iconOnly";
8
8
  state: "enabled" | "selected" | "disabled";
9
- iconName: keyof typeof HeroIcons;
9
+ size: "large" | "medium" | "small";
10
+ iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
10
11
  onClick?: any;
11
12
  }
12
13
 
13
14
  type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
14
15
 
15
16
  export default function IconButton({
16
- variant,
17
17
  color,
18
18
  state,
19
+ size,
19
20
  iconName,
20
- onClick,
21
+ onClick,
21
22
  }: IconButtonProps) {
22
-
23
23
  const [isHovered, setIsHovered] = useState(false);
24
- const [Icon, setIcon] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
25
-
26
- // import icon
27
- const loadIcon = useCallback(async (iconName?: string) => {
28
- if (!iconName) return null;
29
- try {
30
- const module = await import('@heroicons/react/24/outline');
31
- const Icon = module[iconName as keyof typeof module] as IconType;
32
- return Icon || null;
33
- } catch (error) {
34
- console.error(`Failed to load icon ${iconName}:`, error);
35
- return null;
36
- }
37
- }, []);
38
24
 
39
- // Load icons on mount and when props change
40
- useEffect(() => {
41
- const fetchIcons = async () => {
42
- if (typeof iconName === 'string') {
43
- setIcon(await loadIcon(iconName));
44
- }
45
- };
46
- fetchIcons();
47
- }, [iconName, loadIcon]);
25
+ // Select icon based on size
26
+ const Icon: IconType = size === 'small'
27
+ ? HeroIcons20[iconName]
28
+ : HeroIcons24[iconName];
48
29
 
30
+ // Size-based classes
31
+ const sizeClasses = {
32
+ large: 'p-2', // 8px padding
33
+ medium: 'p-1', // 4px padding
34
+ small: 'p-1', // 4px padding
35
+ };
49
36
 
50
- // padding, corner
51
- const baseClasses = variant === 'contained'
52
- ? 'p-2 rounded-[8px] leading-none '
53
- : 'p-2 rounded-[8px] leading-none ';
37
+ const iconSizeClasses = {
38
+ large: 'size-6', // 24px
39
+ medium: 'size-6', // 24px
40
+ small: 'size-5', // 20px
41
+ };
54
42
 
55
- // bg color
56
- const bgColor = variant === 'contained'
57
- ? color === 'primary'
58
- ? 'bg-light-primary-main dark:bg-dark-primary-main' // contained && primary
59
- : 'bg-light-background-accent200 dark:bg-dark-background-accent200' // contained && secondary
60
- : color === 'primary'
61
- ? ' ' // textOnly && primary
62
- : ' '; // textOnly && secondary
43
+ // Base classes (padding and corner radius)
44
+ const baseClasses = `${sizeClasses[size]} rounded-[8px] leading-none`;
63
45
 
64
- // bg color hover
65
- const bgColorHover = variant === 'contained'
66
- ? color === 'primary'
67
- ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark' // contained && primary
68
- : 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300' // contained && secondary
69
- : color === 'primary'
70
- ? 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover' // textOnly && primary
71
- : 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover'; // textOnly && secondary
46
+ // Background color
47
+ const bgColor = color === 'primary'
48
+ ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary: accent/main
49
+ : color === 'secondary'
50
+ ? 'bg-light-primary-main dark:bg-dark-primary-main' // Secondary: primary/main
51
+ : color === 'tertiary'
52
+ ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' // Tertiary: background/accent200
53
+ : ' '; // iconOnly: none
72
54
 
73
- // icon color
74
- const iconColor = variant === 'contained'
75
- ? color === 'primary'
76
- ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // contained && primary
77
- : 'text-light-text-primary dark:text-dark-text-primary' // contained && secondary
78
- : color === 'primary'
79
- ? ' text-light-text-primary dark:text-dark-text-primary' // textOnly && primary
80
- : ' text-light-text-primary dark:text-dark-text-primary'; // textOnly && secondary
55
+ // Background hover color
56
+ const bgColorHover = color === 'primary'
57
+ ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary: accent/dark
58
+ : color === 'secondary'
59
+ ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark' // Secondary: primary/dark
60
+ : color === 'tertiary'
61
+ ? 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300' // Tertiary: background/accent300
62
+ : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100'; // iconOnly: background/accent100
81
63
 
64
+ // Icon color
65
+ const iconColor = color === 'primary'
66
+ ? 'text-light-text-primary dark:text-dark-text-primary' // Primary: text/primary
67
+ : color === 'secondary'
68
+ ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // Secondary: text/contrast
69
+ : color === 'tertiary'
70
+ ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary: text/primary
71
+ : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly: text/primary
82
72
 
83
73
  // state
84
74
  const stateClasses = state === 'disabled'
@@ -89,17 +79,15 @@ export default function IconButton({
89
79
  ? 'cursor-pointer hover:bg-opacity-75'
90
80
  : 'cursor-pointer';
91
81
 
92
-
93
-
94
82
  return (
95
83
  <button
96
- className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} `}
84
+ className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses}`}
97
85
  disabled={state === 'disabled'}
98
86
  onMouseEnter={() => setIsHovered(true)}
99
87
  onMouseLeave={() => setIsHovered(false)}
100
- onClick={onClick}
101
- >
102
- {Icon && <Icon className="size-6" />}
88
+ onClick={onClick}
89
+ >
90
+ {Icon && <Icon className={iconSizeClasses[size]} />}
103
91
  </button>
104
92
  );
105
93
  }
package/dist/components/iconButton.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
- import * as HeroIcons from '@heroicons/react/24/outline';
2
+ import * as HeroIcons24 from '@heroicons/react/24/outline';
3
+ import * as HeroIcons20 from '@heroicons/react/20/solid';
3
4
  interface IconButtonProps {
4
- variant: "contained" | "iconOnly";
5
- color: "primary" | "secondary";
5
+ color: "primary" | "secondary" | "tertiary" | "iconOnly";
6
6
  state: "enabled" | "selected" | "disabled";
7
- iconName: keyof typeof HeroIcons;
7
+ size: "large" | "medium" | "small";
8
+ iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
8
9
  onClick?: any;
9
10
  }
10
- export default function IconButton({ variant, color, state, iconName, onClick, }: IconButtonProps): React.JSX.Element;
11
+ export default function IconButton({ color, state, size, iconName, onClick, }: IconButtonProps): React.JSX.Element;
11
12
  export {};
package/dist/components/iconButton.jsx CHANGED
@@ -1,117 +1,51 @@
1
1
  'use client';
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
- var __generator = (this && this.__generator) || function (thisArg, body) {
12
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
13
- return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
- function verb(n) { return function (v) { return step([n, v]); }; }
15
- function step(op) {
16
- if (f) throw new TypeError("Generator is already executing.");
17
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
18
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19
- if (y = 0, t) op = [op[0] & 2, t.value];
20
- switch (op[0]) {
21
- case 0: case 1: t = op; break;
22
- case 4: _.label++; return { value: op[1], done: false };
23
- case 5: _.label++; y = op[1]; op = [0]; continue;
24
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
- default:
26
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
- if (t[2]) _.ops.pop();
31
- _.trys.pop(); continue;
32
- }
33
- op = body.call(thisArg, _);
34
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
- }
37
- };
38
- import React, { useState, useEffect, useCallback } from 'react';
2
+ import React, { useState } from 'react';
3
+ import * as HeroIcons24 from '@heroicons/react/24/outline';
4
+ import * as HeroIcons20 from '@heroicons/react/20/solid';
39
5
  export default function IconButton(_a) {
40
- var _this = this;
41
- var variant = _a.variant, color = _a.color, state = _a.state, iconName = _a.iconName, onClick = _a.onClick;
6
+ var color = _a.color, state = _a.state, size = _a.size, iconName = _a.iconName, onClick = _a.onClick;
42
7
  var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
43
- var _c = useState(null), Icon = _c[0], setIcon = _c[1];
44
- // import icon
45
- var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
46
- var module_1, Icon_1, error_1;
47
- return __generator(this, function (_a) {
48
- switch (_a.label) {
49
- case 0:
50
- if (!iconName)
51
- return [2 /*return*/, null];
52
- _a.label = 1;
53
- case 1:
54
- _a.trys.push([1, 3, , 4]);
55
- return [4 /*yield*/, import('@heroicons/react/24/outline')];
56
- case 2:
57
- module_1 = _a.sent();
58
- Icon_1 = module_1[iconName];
59
- return [2 /*return*/, Icon_1 || null];
60
- case 3:
61
- error_1 = _a.sent();
62
- console.error("Failed to load icon ".concat(iconName, ":"), error_1);
63
- return [2 /*return*/, null];
64
- case 4: return [2 /*return*/];
65
- }
66
- });
67
- }); }, []);
68
- // Load icons on mount and when props change
69
- useEffect(function () {
70
- var fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
71
- var _a;
72
- return __generator(this, function (_b) {
73
- switch (_b.label) {
74
- case 0:
75
- if (!(typeof iconName === 'string')) return [3 /*break*/, 2];
76
- _a = setIcon;
77
- return [4 /*yield*/, loadIcon(iconName)];
78
- case 1:
79
- _a.apply(void 0, [_b.sent()]);
80
- _b.label = 2;
81
- case 2: return [2 /*return*/];
82
- }
83
- });
84
- }); };
85
- fetchIcons();
86
- }, [iconName, loadIcon]);
87
- // padding, corner
88
- var baseClasses = variant === 'contained'
89
- ? 'p-2 rounded-[8px] leading-none '
90
- : 'p-2 rounded-[8px] leading-none ';
91
- // bg color
92
- var bgColor = variant === 'contained'
93
- ? color === 'primary'
94
- ? 'bg-light-primary-main dark:bg-dark-primary-main' // contained && primary
95
- : 'bg-light-background-accent200 dark:bg-dark-background-accent200' // contained && secondary
96
- : color === 'primary'
97
- ? ' ' // textOnly && primary
98
- : ' '; // textOnly && secondary
99
- // bg color hover
100
- var bgColorHover = variant === 'contained'
101
- ? color === 'primary'
102
- ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark' // contained && primary
103
- : 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300' // contained && secondary
104
- : color === 'primary'
105
- ? 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover' // textOnly && primary
106
- : 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover'; // textOnly && secondary
107
- // icon color
108
- var iconColor = variant === 'contained'
109
- ? color === 'primary'
110
- ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // contained && primary
111
- : 'text-light-text-primary dark:text-dark-text-primary' // contained && secondary
112
- : color === 'primary'
113
- ? ' text-light-text-primary dark:text-dark-text-primary' // textOnly && primary
114
- : ' text-light-text-primary dark:text-dark-text-primary'; // textOnly && secondary
8
+ // Select icon based on size
9
+ var Icon = size === 'small'
10
+ ? HeroIcons20[iconName]
11
+ : HeroIcons24[iconName];
12
+ // Size-based classes
13
+ var sizeClasses = {
14
+ large: 'p-2', // 8px padding
15
+ medium: 'p-1', // 4px padding
16
+ small: 'p-1', // 4px padding
17
+ };
18
+ var iconSizeClasses = {
19
+ large: 'size-6', // 24px
20
+ medium: 'size-6', // 24px
21
+ small: 'size-5', // 20px
22
+ };
23
+ // Base classes (padding and corner radius)
24
+ var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none");
25
+ // Background color
26
+ var bgColor = color === 'primary'
27
+ ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary: accent/main
28
+ : color === 'secondary'
29
+ ? 'bg-light-primary-main dark:bg-dark-primary-main' // Secondary: primary/main
30
+ : color === 'tertiary'
31
+ ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' // Tertiary: background/accent200
32
+ : ' '; // iconOnly: none
33
+ // Background hover color
34
+ var bgColorHover = color === 'primary'
35
+ ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary: accent/dark
36
+ : color === 'secondary'
37
+ ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark' // Secondary: primary/dark
38
+ : color === 'tertiary'
39
+ ? 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300' // Tertiary: background/accent300
40
+ : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100'; // iconOnly: background/accent100
41
+ // Icon color
42
+ var iconColor = color === 'primary'
43
+ ? 'text-light-text-primary dark:text-dark-text-primary' // Primary: text/primary
44
+ : color === 'secondary'
45
+ ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // Secondary: text/contrast
46
+ : color === 'tertiary'
47
+ ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary: text/primary
48
+ : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly: text/primary
115
49
  // state
116
50
  var stateClasses = state === 'disabled'
117
51
  ? 'cursor-not-allowed opacity-50'
@@ -120,7 +54,7 @@ export default function IconButton(_a) {
120
54
  : isHovered
121
55
  ? 'cursor-pointer hover:bg-opacity-75'
122
56
  : 'cursor-pointer';
123
- return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " ")} disabled={state === 'disabled'} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
124
- {Icon && <Icon className="size-6"/>}
57
+ return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses)} disabled={state === 'disabled'} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
58
+ {Icon && <Icon className={iconSizeClasses[size]}/>}
125
59
  </button>);
126
60
  }
package/dist/output.css CHANGED
@@ -556,6 +556,10 @@ video {
556
556
  .flex {
557
557
  display: flex;
558
558
  }
559
+ .size-5 {
560
+ width: 1.25rem;
561
+ height: 1.25rem;
562
+ }
559
563
  .size-6 {
560
564
  width: 1.5rem;
561
565
  height: 1.5rem;
@@ -985,11 +989,6 @@ body {
985
989
  background-color: rgb(206 134 2 / var(--tw-bg-opacity));
986
990
  }
987
991
 
988
- .hover\:bg-light-action-hover:hover {
989
- --tw-bg-opacity: 1;
990
- background-color: rgb(243 243 243 / var(--tw-bg-opacity));
991
- }
992
-
993
992
  .hover\:bg-light-background-accent100:hover {
994
993
  --tw-bg-opacity: 1;
995
994
  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
@@ -1165,11 +1164,6 @@ body {
1165
1164
  background-color: rgb(206 134 2 / var(--tw-bg-opacity));
1166
1165
  }
1167
1166
 
1168
- .hover\:dark\:bg-dark-action-hover:hover {
1169
- --tw-bg-opacity: 1;
1170
- background-color: rgb(61 61 61 / var(--tw-bg-opacity));
1171
- }
1172
-
1173
1167
  .hover\:dark\:bg-dark-background-accent100:hover {
1174
1168
  --tw-bg-opacity: 1;
1175
1169
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "oneslash-design-system",
3
3
  "description": "A design system for the Oneslash projects",
4
- "version": "1.1.14",
4
+ "version": "1.1.15",
5
5
  "private": false,
6
- "main": "./dist/index.js",
6
+ "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
8
8
  "scripts": {
9
9
  "dev": "next dev",
@@ -13,7 +13,7 @@
13
13
  "lint": "next lint"
14
14
  },
15
15
  "dependencies": {
16
- "@heroicons/react": "^2.1.5",
16
+ "@heroicons/react": "^2.2.0",
17
17
  "@popperjs/core": "^2.11.8",
18
18
  "next": "14.2.13",
19
19
  "react": "^18",