@juwel-development/design-system 0.2.0 → 1.1.0
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.
package/dist/design-system.js
CHANGED
|
@@ -45,26 +45,20 @@ var r = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, i = n, a = ((
|
|
|
45
45
|
r
|
|
46
46
|
] : e;
|
|
47
47
|
}, []), n?.class, n?.className);
|
|
48
|
-
})("py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover
|
|
49
|
-
variants: {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
shadow: { none: "shadow-none hover:shadow-none" }
|
|
56
|
-
},
|
|
48
|
+
})("transition-colors duration-[var(--motion-duration-color)] py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface", {
|
|
49
|
+
variants: { variant: {
|
|
50
|
+
primary: "px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground rounded-lg hover:bg-primary-hover focus-visible:ring-primary-ring",
|
|
51
|
+
secondary: "px-4 sm:px-6 min-w-42 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary-hover focus-visible:ring-secondary-ring",
|
|
52
|
+
ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline focus-visible:ring-ring"
|
|
53
|
+
} },
|
|
57
54
|
defaultVariants: { variant: "primary" }
|
|
58
|
-
}), o = ({ children: t, disabled: n, testId: r, variant: i,
|
|
59
|
-
type:
|
|
55
|
+
}), o = ({ children: t, disabled: n, testId: r, variant: i, onClick$: o, ariaLabel: s, type: c = "button" }) => /* @__PURE__ */ e("button", {
|
|
56
|
+
type: c,
|
|
60
57
|
"data-testid": r,
|
|
61
|
-
className: a({
|
|
62
|
-
|
|
63
|
-
shadow: o
|
|
64
|
-
}),
|
|
65
|
-
onClick: () => s?.next(),
|
|
58
|
+
className: a({ variant: i }),
|
|
59
|
+
onClick: () => o?.next(),
|
|
66
60
|
disabled: n,
|
|
67
|
-
"aria-label":
|
|
61
|
+
"aria-label": s,
|
|
68
62
|
children: t
|
|
69
63
|
}), s = {
|
|
70
64
|
surface: "#ffffff",
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-primary-ring:var(--color-primary-ring);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-secondary-ring:var(--color-secondary-ring);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-ring:var(--color-ring);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.block{display:block}.contents{display:contents}.inline{display:inline}.inline-flex{display:inline-flex}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border{border-color:var(--color-border)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:#0000}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-nowrap{text-wrap:nowrap}.text-foreground{color:var(--color-foreground)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-none:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-primary-ring:focus-visible{--tw-ring-color:var(--color-primary-ring)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-secondary-ring:focus-visible{--tw-ring-color:var(--color-secondary-ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-surface:focus-visible{--tw-ring-offset-color:var(--color-surface)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.active\:shadow-none:active{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0ea5e9;--color-secondary-hover:#0284c7;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-ring:#94a3b8;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#d63384;--color-info:#06b6d4}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-primary:#7c3aed;--color-primary-hover:#8b5cf6;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#475569;--color-disabled-hover:#334155;--color-ring:#64748b;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-primary-ring:var(--color-primary-ring);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-secondary-ring:var(--color-secondary-ring);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-ring:var(--color-ring);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.block{display:block}.contents{display:contents}.inline{display:inline}.inline-flex{display:inline-flex}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border{border-color:var(--color-border)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:#0000}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-nowrap{text-wrap:nowrap}.text-foreground{color:var(--color-foreground)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-primary-ring:focus-visible{--tw-ring-color:var(--color-primary-ring)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-secondary-ring:focus-visible{--tw-ring-color:var(--color-secondary-ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-surface:focus-visible{--tw-ring-offset-color:var(--color-surface)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0ea5e9;--color-secondary-hover:#0284c7;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-ring:#94a3b8;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#d63384;--color-info:#06b6d4}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-primary:#7c3aed;--color-primary-hover:#8b5cf6;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#475569;--color-disabled-hover:#334155;--color-ring:#64748b;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}
|
|
@@ -3,7 +3,6 @@ import type { FunctionComponent, PropsWithChildren } from 'react';
|
|
|
3
3
|
import type { Subject } from 'rxjs';
|
|
4
4
|
declare const button: (props?: ({
|
|
5
5
|
variant?: "primary" | "secondary" | "ghost" | null | undefined;
|
|
6
|
-
shadow?: "none" | null | undefined;
|
|
7
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
7
|
export interface IButtonProps extends VariantProps<typeof button>, PropsWithChildren {
|
|
9
8
|
onClick$?: Subject<void>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@juwel-development/design-system",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared design system: tokens and components.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -45,6 +45,12 @@
|
|
|
45
45
|
"lint:fix": "biome check --write .",
|
|
46
46
|
"storybook": "storybook dev -p 6006",
|
|
47
47
|
"build-storybook": "storybook build",
|
|
48
|
+
"sandcastle": "tsx .sandcastle/main.ts",
|
|
49
|
+
"sandcastle:image": "sandcastle docker build-image",
|
|
50
|
+
"fallow": "fallow",
|
|
51
|
+
"fallow:human": "fallow dead-code && fallow dupes && fallow health",
|
|
52
|
+
"fallow:agent": "fallow review --brief",
|
|
53
|
+
"fallow:map": "fallow viz",
|
|
48
54
|
"prepare": "husky"
|
|
49
55
|
},
|
|
50
56
|
"dependencies": {
|
|
@@ -56,6 +62,7 @@
|
|
|
56
62
|
"rxjs": "^7.8.2"
|
|
57
63
|
},
|
|
58
64
|
"devDependencies": {
|
|
65
|
+
"@ai-hero/sandcastle": "^0.12.0",
|
|
59
66
|
"@biomejs/biome": "^2.5.7",
|
|
60
67
|
"@commitlint/cli": "^21.2.1",
|
|
61
68
|
"@commitlint/config-conventional": "^21.2.0",
|
|
@@ -73,6 +80,7 @@
|
|
|
73
80
|
"@types/react-dom": "^19.2.4",
|
|
74
81
|
"@vitejs/plugin-react": "^5.1.0",
|
|
75
82
|
"@vitest/coverage-v8": "^4.1.10",
|
|
83
|
+
"fallow": "^3.14.0",
|
|
76
84
|
"husky": "^9.1.7",
|
|
77
85
|
"jsdom": "^30.0.1",
|
|
78
86
|
"react": "^19.2.8",
|
|
@@ -85,6 +93,12 @@
|
|
|
85
93
|
"typescript": "^5.9.2",
|
|
86
94
|
"vite": "^8.2.1",
|
|
87
95
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
88
|
-
"vitest": "^4.1.10"
|
|
96
|
+
"vitest": "^4.1.10",
|
|
97
|
+
"zod": "^4.4.3"
|
|
98
|
+
},
|
|
99
|
+
"overrides": {
|
|
100
|
+
"fallow-type-aware": {
|
|
101
|
+
"typescript": "7.0.2"
|
|
102
|
+
}
|
|
89
103
|
}
|
|
90
104
|
}
|
|
@@ -5,20 +5,19 @@ import type { Subject } from 'rxjs';
|
|
|
5
5
|
|
|
6
6
|
// No `dark:` classes here by design: every colour below is a semantic token whose value is
|
|
7
7
|
// re-pointed by the `.dark` class in tokens.css, so one set of classes serves both themes.
|
|
8
|
+
// The colour transition is stated once in the base, on the motion token, so no variant can
|
|
9
|
+
// disagree with it - see docs/adr/0001-motion-token-contract.md.
|
|
8
10
|
const button = cva(
|
|
9
|
-
'py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover
|
|
11
|
+
'transition-colors duration-[var(--motion-duration-color)] py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
|
|
10
12
|
{
|
|
11
13
|
variants: {
|
|
12
14
|
variant: {
|
|
13
15
|
primary:
|
|
14
|
-
'px-4 sm:px-6 min-w-42 bg-primary
|
|
16
|
+
'px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground rounded-lg hover:bg-primary-hover focus-visible:ring-primary-ring',
|
|
15
17
|
secondary:
|
|
16
|
-
'px-4 sm:px-6 min-w-42 bg-secondary
|
|
18
|
+
'px-4 sm:px-6 min-w-42 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary-hover focus-visible:ring-secondary-ring',
|
|
17
19
|
ghost:
|
|
18
|
-
'px-2 min-w-0 bg-transparent text-foreground hover:underline
|
|
19
|
-
},
|
|
20
|
-
shadow: {
|
|
21
|
-
none: 'shadow-none hover:shadow-none',
|
|
20
|
+
'px-2 min-w-0 bg-transparent text-foreground hover:underline focus-visible:ring-ring',
|
|
22
21
|
},
|
|
23
22
|
},
|
|
24
23
|
defaultVariants: {
|
|
@@ -65,7 +64,6 @@ export const Button: FunctionComponent<PropsWithChildren<IButtonProps>> = ({
|
|
|
65
64
|
disabled,
|
|
66
65
|
testId,
|
|
67
66
|
variant,
|
|
68
|
-
shadow,
|
|
69
67
|
onClick$,
|
|
70
68
|
ariaLabel,
|
|
71
69
|
type = 'button',
|
|
@@ -74,7 +72,7 @@ export const Button: FunctionComponent<PropsWithChildren<IButtonProps>> = ({
|
|
|
74
72
|
<button
|
|
75
73
|
type={type}
|
|
76
74
|
data-testid={testId}
|
|
77
|
-
className={button({ variant
|
|
75
|
+
className={button({ variant })}
|
|
78
76
|
onClick={() => onClick$?.next()}
|
|
79
77
|
disabled={disabled}
|
|
80
78
|
aria-label={ariaLabel}
|
|
@@ -7,6 +7,22 @@ const GENERATED_HEADER = `/* GENERATED from src/Theme/Palette.ts by \`npm run bu
|
|
|
7
7
|
* values inside @theme directly would freeze them at build time and the .dark overrides would
|
|
8
8
|
* never reach the utilities. */`;
|
|
9
9
|
|
|
10
|
+
/* The library performs exactly one motion - a colour transition - so its motion contract is this
|
|
11
|
+
single token. 150ms matches Tailwind's default, so it changes nothing visually; its job is to
|
|
12
|
+
have a name a consumer theme and the reduced-motion query can reach.
|
|
13
|
+
See docs/adr/0001-motion-token-contract.md. */
|
|
14
|
+
const MOTION = `:root {
|
|
15
|
+
--motion-duration-color: 150ms;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Honour prefers-reduced-motion for the one motion the library performs, by re-pointing the token
|
|
19
|
+
to 0ms. Deliberately no blanket transition reset - only what the library performs is zeroed. */
|
|
20
|
+
@media (prefers-reduced-motion: reduce) {
|
|
21
|
+
:root {
|
|
22
|
+
--motion-duration-color: 0ms;
|
|
23
|
+
}
|
|
24
|
+
}`;
|
|
25
|
+
|
|
10
26
|
const toKebabCase = (name: string): string =>
|
|
11
27
|
name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
|
|
12
28
|
|
|
@@ -45,5 +61,8 @@ ${declarations(dark, raw(dark))}
|
|
|
45
61
|
@theme inline {
|
|
46
62
|
${declarations(light, reference())}
|
|
47
63
|
}
|
|
64
|
+
|
|
65
|
+
/* Motion is not a colour: it is carried in :root only, never mapped into @theme inline. */
|
|
66
|
+
${MOTION}
|
|
48
67
|
`;
|
|
49
68
|
};
|
package/src/tokens.css
CHANGED
|
@@ -74,3 +74,16 @@
|
|
|
74
74
|
--color-error: var(--color-error);
|
|
75
75
|
--color-info: var(--color-info);
|
|
76
76
|
}
|
|
77
|
+
|
|
78
|
+
/* Motion is not a colour: it is carried in :root only, never mapped into @theme inline. */
|
|
79
|
+
:root {
|
|
80
|
+
--motion-duration-color: 150ms;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Honour prefers-reduced-motion for the one motion the library performs, by re-pointing the token
|
|
84
|
+
to 0ms. Deliberately no blanket transition reset - only what the library performs is zeroed. */
|
|
85
|
+
@media (prefers-reduced-motion: reduce) {
|
|
86
|
+
:root {
|
|
87
|
+
--motion-duration-color: 0ms;
|
|
88
|
+
}
|
|
89
|
+
}
|