@pondipondi/mimas 0.1.2 → 0.1.4

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.
@@ -0,0 +1,41 @@
1
+ import { Button } from "@/components";
2
+ import type { StoryObj } from "@storybook/react";
3
+ declare const meta: {
4
+ component: typeof Button;
5
+ parameters: {
6
+ layout: string;
7
+ };
8
+ tags: string[];
9
+ argTypes: {
10
+ size: {
11
+ control: "radio";
12
+ options: string[];
13
+ };
14
+ width: {
15
+ control: "radio";
16
+ options: string[];
17
+ };
18
+ colour: {
19
+ control: "select";
20
+ options: string[];
21
+ };
22
+ corners: {
23
+ control: "select";
24
+ options: string[];
25
+ };
26
+ leftCorners: {
27
+ control: "select";
28
+ options: string[];
29
+ };
30
+ };
31
+ args: {
32
+ size: "large";
33
+ colour: "base";
34
+ text: string;
35
+ width: "fit";
36
+ corners: "round";
37
+ };
38
+ };
39
+ export default meta;
40
+ type Story = StoryObj<typeof meta>;
41
+ export declare const Primary: Story;
@@ -0,0 +1,21 @@
1
+ import { LoadingRing } from "@/components";
2
+ import type { StoryObj } from "@storybook/react";
3
+ declare const meta: {
4
+ component: typeof LoadingRing;
5
+ parameters: {
6
+ layout: string;
7
+ };
8
+ tags: string[];
9
+ argTypes: {
10
+ size: {
11
+ control: "radio";
12
+ options: string[];
13
+ };
14
+ };
15
+ args: {
16
+ size: "large";
17
+ };
18
+ };
19
+ export default meta;
20
+ type Story = StoryObj<typeof meta>;
21
+ export declare const Primary: Story;
@@ -0,0 +1,11 @@
1
+ import type { StoryObj } from "@storybook/react";
2
+ import { Inset } from "@/components";
3
+ declare const meta: {
4
+ parameters: {
5
+ layout: string;
6
+ };
7
+ tags: string[];
8
+ };
9
+ export default meta;
10
+ type Story = StoryObj<typeof Inset>;
11
+ export declare const Primary: Story;
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ @import"https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap";/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */@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-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,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;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--animate-spin:spin 1s linear infinite;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-base-50:oklch(98.5% 0 0);--color-base-200:oklch(92.2% 0 0);--color-base-300:oklch(87% 0 0);--color-base-400:oklch(70.8% 0 0);--color-base-700:oklch(35.1% 0 0);--color-base-800:oklch(26.9% 0 0);--color-base-900:oklch(20.5% 0 0);--color-primary-text:oklch(97% 0 0);--color-primary-600:oklch(64.8% .2 131.684);--color-primary-700:oklch(53.2% .157 131.589);--color-primary-900:oklch(40.5% .101 131.063);--color-positive-text:oklch(97% 0 0);--color-positive-600:oklch(64.8% .2 131.684);--color-positive-700:oklch(53.2% .157 131.589);--color-positive-900:oklch(40.5% .101 131.063);--color-negative-text:oklch(97% 0 0);--color-negative-500:oklch(64.5% .246 16.439);--color-negative-600:oklch(58.6% .253 17.585);--color-negative-700:oklch(51.4% .222 16.935);--color-negative-900:oklch(41% .159 10.272);--color-warning-text:oklch(30.1% 0 0);--color-warning-400:oklch(82.8% .189 84.429);--color-warning-500:oklch(76.9% .188 70.08);--color-warning-800:oklch(47.3% .137 46.201)}}@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%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,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;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{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}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance: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{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.isolate{isolation:isolate}.z-10{z-index:10}.block{display:block}.flex{display:flex}.hidden{display:none}.h-5{height:calc(var(--spacing)*5)}.h-8{height:calc(var(--spacing)*8)}.h-\[400px\]{height:400px}.h-full{height:100%}.min-h-5{min-height:calc(var(--spacing)*5)}.min-h-8{min-height:calc(var(--spacing)*8)}.w-5{width:calc(var(--spacing)*5)}.w-5xl{width:var(--container-5xl)}.w-8{width:calc(var(--spacing)*8)}.w-full{width:100%}.grow{flex-grow:1}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-s-full{border-start-start-radius:3.40282e38px;border-end-start-radius:3.40282e38px}.rounded-s-lg{border-start-start-radius:var(--radius-lg);border-end-start-radius:var(--radius-lg)}.rounded-s-md{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}.rounded-s-sm{border-start-start-radius:var(--radius-sm);border-end-start-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t-\[3px\]{border-top-style:var(--tw-border-style);border-top-width:3px}.border-base-300\/70{border-color:#d4d4d4b3}@supports (color:color-mix(in lab,red,red)){.border-base-300\/70{border-color:color-mix(in oklab,var(--color-base-300)70%,transparent)}}.border-base-700\/70{border-color:#3b3b3bb3}@supports (color:color-mix(in lab,red,red)){.border-base-700\/70{border-color:color-mix(in oklab,var(--color-base-700)70%,transparent)}}.border-base-900{border-color:var(--color-base-900)}.border-negative-500\/60{border-color:#ff235799}@supports (color:color-mix(in lab,red,red)){.border-negative-500\/60{border-color:color-mix(in oklab,var(--color-negative-500)60%,transparent)}}.border-positive-600\/70{border-color:#62a400b3}@supports (color:color-mix(in lab,red,red)){.border-positive-600\/70{border-color:color-mix(in oklab,var(--color-positive-600)70%,transparent)}}.border-primary-600\/70{border-color:#62a400b3}@supports (color:color-mix(in lab,red,red)){.border-primary-600\/70{border-color:color-mix(in oklab,var(--color-primary-600)70%,transparent)}}.border-warning-400\/70{border-color:#fcbb00b3}@supports (color:color-mix(in lab,red,red)){.border-warning-400\/70{border-color:color-mix(in oklab,var(--color-warning-400)70%,transparent)}}.bg-base-200{background-color:var(--color-base-200)}.bg-base-300{background-color:var(--color-base-300)}.bg-base-400{background-color:var(--color-base-400)}.bg-base-700{background-color:var(--color-base-700)}.bg-base-800{background-color:var(--color-base-800)}.bg-negative-700{background-color:var(--color-negative-700)}.bg-negative-900{background-color:var(--color-negative-900)}.bg-positive-700{background-color:var(--color-positive-700)}.bg-positive-900{background-color:var(--color-positive-900)}.bg-primary-700{background-color:var(--color-primary-700)}.bg-primary-900{background-color:var(--color-primary-900)}.bg-warning-500{background-color:var(--color-warning-500)}.bg-warning-800{background-color:var(--color-warning-800)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.p-16{padding:calc(var(--spacing)*16)}.p-\[2px\]{padding:2px}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.py-1{padding-block:calc(var(--spacing)*1)}.py-\[2px\]{padding-block:2px}.pb-\[2px\]{padding-bottom:2px}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-base-200{color:var(--color-base-200)}.text-base-800{color:var(--color-base-800)}.text-inherit{color:inherit}.text-negative-text{color:var(--color-negative-text)}.text-positive-text{color:var(--color-positive-text)}.text-primary-text{color:var(--color-primary-text)}.text-warning-text{color:var(--color-warning-text)}.opacity-15{opacity:.15}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-base-900\/50{--tw-shadow-color:#17171780}@supports (color:color-mix(in lab,red,red)){.shadow-base-900\/50{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-900)50%,transparent)var(--tw-shadow-alpha),transparent)}}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.group-active\:border-base-300\/40:is(:where(.group):active *){border-color:#d4d4d466}@supports (color:color-mix(in lab,red,red)){.group-active\:border-base-300\/40:is(:where(.group):active *){border-color:color-mix(in oklab,var(--color-base-300)40%,transparent)}}.group-active\:border-base-700\/40:is(:where(.group):active *){border-color:#3b3b3b66}@supports (color:color-mix(in lab,red,red)){.group-active\:border-base-700\/40:is(:where(.group):active *){border-color:color-mix(in oklab,var(--color-base-700)40%,transparent)}}.group-active\:border-negative-600\/40:is(:where(.group):active *){border-color:#e7004466}@supports (color:color-mix(in lab,red,red)){.group-active\:border-negative-600\/40:is(:where(.group):active *){border-color:color-mix(in oklab,var(--color-negative-600)40%,transparent)}}.group-active\:border-positive-600\/40:is(:where(.group):active *){border-color:#62a40066}@supports (color:color-mix(in lab,red,red)){.group-active\:border-positive-600\/40:is(:where(.group):active *){border-color:color-mix(in oklab,var(--color-positive-600)40%,transparent)}}.group-active\:border-primary-600\/40:is(:where(.group):active *){border-color:#62a40066}@supports (color:color-mix(in lab,red,red)){.group-active\:border-primary-600\/40:is(:where(.group):active *){border-color:color-mix(in oklab,var(--color-primary-600)40%,transparent)}}.group-active\:border-warning-400\/40:is(:where(.group):active *){border-color:#fcbb0066}@supports (color:color-mix(in lab,red,red)){.group-active\:border-warning-400\/40:is(:where(.group):active *){border-color:color-mix(in oklab,var(--color-warning-400)40%,transparent)}}.group-disabled\:border-base-300\/40:is(:where(.group):disabled *){border-color:#d4d4d466}@supports (color:color-mix(in lab,red,red)){.group-disabled\:border-base-300\/40:is(:where(.group):disabled *){border-color:color-mix(in oklab,var(--color-base-300)40%,transparent)}}.group-disabled\:border-base-700\/40:is(:where(.group):disabled *){border-color:#3b3b3b66}@supports (color:color-mix(in lab,red,red)){.group-disabled\:border-base-700\/40:is(:where(.group):disabled *){border-color:color-mix(in oklab,var(--color-base-700)40%,transparent)}}.group-disabled\:border-negative-600\/40:is(:where(.group):disabled *){border-color:#e7004466}@supports (color:color-mix(in lab,red,red)){.group-disabled\:border-negative-600\/40:is(:where(.group):disabled *){border-color:color-mix(in oklab,var(--color-negative-600)40%,transparent)}}.group-disabled\:border-positive-600\/40:is(:where(.group):disabled *){border-color:#62a40066}@supports (color:color-mix(in lab,red,red)){.group-disabled\:border-positive-600\/40:is(:where(.group):disabled *){border-color:color-mix(in oklab,var(--color-positive-600)40%,transparent)}}.group-disabled\:border-primary-600\/40:is(:where(.group):disabled *){border-color:#62a40066}@supports (color:color-mix(in lab,red,red)){.group-disabled\:border-primary-600\/40:is(:where(.group):disabled *){border-color:color-mix(in oklab,var(--color-primary-600)40%,transparent)}}.group-disabled\:border-warning-400\/40:is(:where(.group):disabled *){border-color:#fcbb0066}@supports (color:color-mix(in lab,red,red)){.group-disabled\:border-warning-400\/40:is(:where(.group):disabled *){border-color:color-mix(in oklab,var(--color-warning-400)40%,transparent)}}.group-disabled\:opacity-50:is(:where(.group):disabled *){opacity:.5}@media (prefers-color-scheme:dark){.dark\:bg-base-900{background-color:var(--color-base-900)}}}:root{color:var(--color-base-50);font-family:Mulish,sans-serif;font-weight:500}.shadow-form{transition:background-color .2s,box-shadow .2s;box-shadow:inset 0 1px 8px 2px #ffffff08,inset 0 -6px 5px -3px #00000014}.group:hover .shadow-form,.shadow-form:hover{box-shadow:inset 0 1px 5px 3px #ffffff08,inset 0 -7px 5px -3px #0000001a}.group:active .shadow-form,.shadow-form:active,.group:disabled .shadow-form,.shadow-form:disabled,.shadow-form:disabled:hover{box-shadow:inset 0 2px 6px 6px #0000001f,inset 0 -7px 5px -3px #0000}.animate-press{transition:all .1s}.group:hover .animate-press{translate:0 -1px}.group:disabled .animate-press,.group:active .animate-press{translate:0 1px}@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-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
package/package.json CHANGED
@@ -1,39 +1,24 @@
1
1
  {
2
2
  "name": "@pondipondi/mimas",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",
7
- "build": "tsc -b && vite build",
7
+ "build": "vite build && tsc",
8
8
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
9
9
  "preview": "vite preview",
10
+ "prepublishOnly": "npm run build",
10
11
  "storybook": "storybook dev -p 6006",
11
12
  "build-storybook": "storybook build"
12
13
  },
13
- "dependencies": {
14
- "autoprefixer": "^10.4.19",
15
- "postcss": "^8.4.39",
16
- "react": ">=18.3.1",
17
- "react-dom": ">=18.3.1",
18
- "tailwind-variants": "^0.2.1",
19
- "tailwindcss": "^3.4.4"
20
- },
21
14
  "peerDependencies": {
22
- "react": ">=18.3.1",
23
- "react-dom": ">=18.3.1"
15
+ "react": "^18.3.1",
16
+ "react-dom": "^18.3.1"
24
17
  },
25
18
  "devDependencies": {
26
- "@chromatic-com/storybook": "1.6.1",
27
- "@storybook/addon-essentials": "^8.2.2",
28
- "@storybook/addon-interactions": "^8.2.2",
29
- "@storybook/addon-links": "^8.2.1",
30
- "@storybook/addon-onboarding": "^8.2.1",
31
- "@storybook/blocks": "^8.2.1",
32
- "@storybook/manager-api": "^8.2.1",
33
- "@storybook/react": "^8.2.2",
34
- "@storybook/react-vite": "^8.2.2",
35
- "@storybook/test": "^8.2.2",
36
- "@storybook/theming": "^8.2.1",
19
+ "@storybook/addon-docs": "^9.1.0-alpha.6",
20
+ "@storybook/react-vite": "^9.1.0-alpha.6",
21
+ "@tailwindcss/postcss": "^4.1.10",
37
22
  "@types/react": "^18.3.3",
38
23
  "@types/react-dom": "^18.3.0",
39
24
  "@typescript-eslint/eslint-plugin": "^7.13.1",
@@ -43,16 +28,22 @@
43
28
  "eslint-plugin-react-hooks": "^4.6.2",
44
29
  "eslint-plugin-react-refresh": "^0.4.7",
45
30
  "eslint-plugin-storybook": "^0.8.0",
46
- "storybook": "^8.2.1",
47
- "storybook-dark-mode": "^4.0.2",
31
+ "postcss": "^8.5.6",
32
+ "prettier": "^3.5.3",
33
+ "prettier-plugin-tailwindcss": "^0.6.13",
34
+ "react": "^18.3.1",
35
+ "react-dom": "^18.3.1",
36
+ "storybook": "^9.1.0-alpha.6",
37
+ "tailwind-variants": "^0.2.1",
38
+ "tailwindcss": "^4.1.10",
48
39
  "typescript": "^5.2.2",
49
- "vite": "^5.4.19",
50
- "vite-plugin-dts": "^4.5.4"
40
+ "vite": "^5.4.19"
51
41
  },
52
- "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
42
+ "description": "Mimas components.",
53
43
  "main": "dist/mimas.cjs.js",
54
44
  "module": "dist/mimas.es.js",
55
45
  "types": "dist/index.d.ts",
46
+ "style": "dist/mimas.css",
56
47
  "files": [
57
48
  "dist",
58
49
  "README.md"
@@ -1,56 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { fn } from "@storybook/test";
3
- import Button from "./Button";
4
-
5
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6
- const meta = {
7
- title: "Mimas/Crumbs/Button",
8
- component: Button,
9
- parameters: {
10
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
11
- layout: "centered",
12
- },
13
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
14
- tags: ["autodocs"],
15
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
16
- argTypes: {
17
- size: {
18
- control: "radio",
19
- options: ["large", "small"],
20
- },
21
- width: {
22
- control: "radio",
23
- options: ["fit", "grow"],
24
- },
25
- colour: {
26
- control: "select",
27
- options: ["red", "blue", "green", "white", "neutral"],
28
- },
29
- corners: {
30
- control: "select",
31
- options: ["sharp", "round", "circle"],
32
- },
33
- leftCorners: {
34
- control: "select",
35
- options: ["none", "sharp", "round", "circle"],
36
- },
37
- },
38
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
39
- args: {
40
- onClick: fn(),
41
- size: "large",
42
- noise: "medium",
43
- colour: "neutral",
44
- text: "Button",
45
- width: "fit",
46
- corners: "round",
47
- },
48
- } satisfies Meta<typeof Button>;
49
-
50
- export default meta;
51
- type Story = StoryObj<typeof meta>;
52
-
53
- // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
54
- export const Primary: Story = {
55
- args: {},
56
- };
@@ -1,160 +0,0 @@
1
- import LoadingRing from "../LoadingRing/LoadingRing";
2
- import Noise from "../../util/Noise/Noise";
3
- import { tv, VariantProps } from "tailwind-variants";
4
-
5
- const button = tv({
6
- slots: {
7
- outer: "group p-[2px] bg-neutral-200 dark:bg-neutral-900",
8
- inner: "relative shadow-form border overflow-hidden animate-press",
9
- chip: "pb-[2px]",
10
- },
11
- variants: {
12
- corners: {
13
- sharp: {
14
- inner: "rounded-sm",
15
- outer: "rounded-sm",
16
- chip: "rounded-sm",
17
- },
18
- round: {
19
- inner: "rounded-md",
20
- outer: "rounded-lg",
21
- chip: "rounded-md",
22
- },
23
- circle: {
24
- inner: "rounded-full",
25
- outer: "rounded-full",
26
- chip: "rounded-full",
27
- },
28
- },
29
- leftCorners: {
30
- none: {},
31
- sharp: {
32
- inner: "rounded-s-sm",
33
- outer: "rounded-s-sm",
34
- chip: "rounded-s-sm",
35
- },
36
- round: {
37
- inner: "rounded-s-md",
38
- outer: "rounded-s-lg",
39
- chip: "rounded-s-md",
40
- },
41
- circle: {
42
- inner: "rounded-s-full",
43
- outer: "rounded-s-full",
44
- chip: "rounded-s-full",
45
- },
46
- },
47
- size: {
48
- small: {
49
- inner: "py-[2px] px-2 text-xs min-h-5",
50
- },
51
- large: {
52
- inner: "py-1 px-3 min-h-8",
53
- },
54
- },
55
- colour: {
56
- neutral: {
57
- inner:
58
- "bg-neutral-800 border-neutral-700/70 group-disabled:border-neutral-700/40 group-active:border-neutral-700/40 text-neutral-200",
59
- chip: "bg-neutral-800",
60
- },
61
- red: {
62
- inner:
63
- "bg-red-700 border-red-500/60 group-disabled:border-red-600/40 group-active:border-red-600/40 text-neutral-200",
64
- chip: "bg-red-900",
65
- },
66
- green: {
67
- inner:
68
- "bg-lime-700 border-lime-600/70 group-disabled:border-lime-600/40 group-active:border-lime-600/40 text-neutral-200",
69
- chip: "bg-lime-900",
70
- },
71
- blue: {
72
- inner:
73
- "bg-sky-700 border-sky-600/70 group-disabled:border-sky-600/40 group-active:border-sky-600/40 text-neutral-200",
74
- chip: "bg-sky-900",
75
- },
76
- white: {
77
- inner:
78
- "bg-neutral-300 border-neutral-300/70 group-disabled:border-neutral-300/40 group-active:border-neutral-300/40 text-neutral-800",
79
- chip: "bg-neutral-400",
80
- },
81
- },
82
- width: {
83
- fit: {},
84
- grow: {
85
- inner: "w-full",
86
- outer: "w-full",
87
- chip: "w-full",
88
- },
89
- },
90
- },
91
- defaultVariants: {
92
- size: "large",
93
- colour: "neutral",
94
- corners: "round",
95
- leftCorners: "none",
96
- },
97
- });
98
-
99
- interface ButtonProps
100
- extends VariantProps<typeof button>,
101
- React.ButtonHTMLAttributes<HTMLButtonElement> {
102
- loading?: boolean;
103
- text?: string;
104
- }
105
-
106
- function Button({
107
- size,
108
- colour,
109
- width,
110
- corners,
111
- leftCorners,
112
- loading,
113
- text,
114
- children,
115
- className,
116
- disabled,
117
- onClick,
118
- ...props
119
- }: ButtonProps) {
120
- const { outer, chip, inner } = button({
121
- size,
122
- colour,
123
- width,
124
- corners,
125
- leftCorners,
126
- });
127
-
128
- // TODO handle keyboard
129
-
130
- return (
131
- <button
132
- className={outer()}
133
- disabled={disabled || loading}
134
- onClick={onClick}
135
- {...props}
136
- >
137
- <div className={chip()}>
138
- <div className={inner({ className })}>
139
- <span
140
- className="relative block z-10 text-inherit group-disabled:opacity-50"
141
- style={{ visibility: loading ? "hidden" : "visible" }}
142
- >
143
- {children}
144
- {text}
145
- </span>
146
-
147
- {loading && (
148
- <div className="absolute inset-0 w-full h-full flex justify-center items-center">
149
- <LoadingRing size={size} />
150
- </div>
151
- )}
152
-
153
- <Noise />
154
- </div>
155
- </div>
156
- </button>
157
- );
158
- }
159
-
160
- export default Button;
@@ -1,33 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import LoadingRing from "./LoadingRing";
3
-
4
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
5
- const meta = {
6
- title: "Mimas/Crumbs/LoadingRing",
7
- component: LoadingRing,
8
- parameters: {
9
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
10
- layout: "centered",
11
- },
12
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
13
- tags: ["autodocs"],
14
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
15
- argTypes: {
16
- size: {
17
- control: "radio",
18
- options: ["large", "small"],
19
- },
20
- },
21
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
22
- args: {
23
- size: "large",
24
- },
25
- } satisfies Meta<typeof LoadingRing>;
26
-
27
- export default meta;
28
- type Story = StoryObj<typeof meta>;
29
-
30
- // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
31
- export const Primary: Story = {
32
- args: {},
33
- };
@@ -1,33 +0,0 @@
1
- import { tv, VariantProps } from "tailwind-variants";
2
-
3
- const loadingRing = tv({
4
- base: "animate-spin",
5
- variants: {
6
- size: {
7
- small: "w-5 h-5",
8
- large: "w-8 h-8",
9
- },
10
- },
11
- });
12
-
13
- function LoadingRing({ size }: VariantProps<typeof loadingRing>) {
14
- return (
15
- <div className={loadingRing({ size })}>
16
- <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
17
- <circle
18
- cx="400"
19
- cy="400"
20
- fill="none"
21
- r="200"
22
- stroke-width="50"
23
- stroke-dasharray="269 150"
24
- stroke="currentColor"
25
- opacity={0.5}
26
- stroke-linecap="round"
27
- />
28
- </svg>
29
- </div>
30
- );
31
- }
32
-
33
- export default LoadingRing;
@@ -1,12 +0,0 @@
1
- // colour (for selected)
2
- // values: {key, label}
3
- // selected value (typeof values)
4
- // roundedness
5
- // onSelect
6
- //
7
-
8
- function ToggleSet() {
9
- return <div>ToggleSet</div>;
10
- }
11
-
12
- export default ToggleSet;
@@ -1,5 +0,0 @@
1
- export { default as Button } from "./crumbs/Button/Button";
2
- export { default as LoadingRing } from "./crumbs/LoadingRing/LoadingRing";
3
- export { default as ToggleSet } from "./crumbs/ToggleSet/ToggleSet";
4
-
5
- export { default as Noise } from "./util/Noise/Noise";
@@ -1,19 +0,0 @@
1
- function Noise() {
2
- return (
3
- <>
4
- <svg
5
- className="pointer-events-none absolute inset-0 isolate z-10 h-full w-full opacity-25"
6
- height="100%"
7
- id="texture"
8
- >
9
- <filter id="noise">
10
- <feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="4" stitchTiles="stitch"></feTurbulence>
11
- <feColorMatrix type="saturate" values="0"></feColorMatrix>
12
- </filter>
13
- <rect width="100%" height="100%" filter="url(#noise)"></rect>
14
- </svg>
15
- </>
16
- );
17
- }
18
-
19
- export default Noise;
package/dist/index.css DELETED
@@ -1,55 +0,0 @@
1
- @import "tailwindcss/base";
2
- @import "tailwindcss/components";
3
- @import "tailwindcss/utilities";
4
-
5
- @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
6
-
7
- :root {
8
- font-family: "Rubik", sans-serif;
9
- color: white;
10
- }
11
-
12
- .shadow-form {
13
- box-shadow:
14
- inset 0 1px 8px 2px rgba(255, 255, 255, 0.03),
15
- inset 0 -6px 5px -3px rgba(0, 0, 0, 0.08);
16
-
17
- transition:
18
- background-color 200ms ease,
19
- box-shadow 200ms ease;
20
- }
21
-
22
- .group:hover .shadow-form,
23
- .shadow-form:hover {
24
- box-shadow:
25
- inset 0 1px 5px 3px rgba(255, 255, 255, 0.03),
26
- inset 0 -7px 5px -3px rgba(0, 0, 0, 0.1);
27
- }
28
-
29
- .group:active .shadow-form,
30
- .shadow-form:active {
31
- box-shadow:
32
- inset 0 2px 6px 6px rgba(0, 0, 0, 0.12),
33
- inset 0 -7px 5px -3px rgba(0, 0, 0, 0);
34
- }
35
-
36
- .group:disabled .shadow-form,
37
- .shadow-form:disabled,
38
- .shadow-form:disabled:hover {
39
- box-shadow:
40
- inset 0 2px 6px 6px rgba(0, 0, 0, 0.12),
41
- inset 0 -7px 5px -3px rgba(0, 0, 0, 0);
42
- }
43
-
44
- .animate-press {
45
- transition: all 100ms ease;
46
- }
47
-
48
- .group:hover .animate-press {
49
- translate: 0 -1px;
50
- }
51
-
52
- .group:disabled .animate-press,
53
- .group:active .animate-press {
54
- translate: 0 1px;
55
- }
@@ -1 +0,0 @@
1
- /// <reference types="vite/client" />