najwer23morsels 0.0.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # najwer23morsels
 
+## 0.2.0
+
+### Minor Changes
+
+- TextBox
+
 ## 0.0.1
 
 ### Patch Changes

package/README.md

@@ -1 +1,19 @@
-Morsels! 
+# Morsels!
+
+### Global css variables available
+
+```CSS
+:root {
+    /* Main */
+    --najwer23morselsFontFamily:  --fontFamily, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica,
+      Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+
+    /* MorselsTextBox  */
+    --najwer23morselsTextBoxMargin: 20px;
+    --najwer23morselsTextBoxColor: red;
+    --najwer23morselsTextBoxColorHover: orange;
+    --najwer23morselsTextBoxLineHeight: 1.42857;
+    --najwer23morselsTextBoxFontWeight: 400;
+    --najwer23morselsTextBoxFontWeightHover: 800
+}
+```

package/lib/TextBox.d.ts

@@ -0,0 +1,18 @@
+export type TextBoxTag = 'h1' | 'h2' | 'h3' | 'p' | 'div';
+interface TextBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    tag?: TextBoxTag;
+    mobileSize: number;
+    desktopSize: number;
+    lineHeight?: number | string;
+    target?: string;
+    rel?: string;
+    href?: string;
+    color?: string;
+    colorHover?: string;
+    margin?: string | 0;
+    fontWeight?: number;
+    fontWeightHover?: number;
+}
+export declare const TextBox: React.FC<TextBoxProps>;
+export {};

package/lib/Textbox.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";var r={morselsTextBox:"TextBox-module_morselsTextBox__h97Ta"};!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("@layer najwer23morselsTextBox{.TextBox-module_morselsTextBox__h97Ta{--mobileFontSize:var(--ms);--desktopFontSize:var(--ds);--minViewport:400;--maxViewport:1400;--textBoxFontFamilyDefault:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--clampMinSize:min(var(--mobileFontSize),var(--desktopFontSize));--clampMaxSize:max(var(--mobileFontSize),var(--desktopFontSize));--fluidStartSize:var(--mobileFontSize);--fluidEndSize:var(--desktopFontSize);--sizeDifference:calc(var(--fluidEndSize) - var(--fluidStartSize));--viewportRange:calc(var(--maxViewport) - var(--minViewport));--slope:calc(var(--sizeDifference)/var(--viewportRange));--intercept:calc(var(--fluidStartSize) - var(--slope)*var(--minViewport));color:var(--najwer23morselsTextBoxColor,var(--c));font-family:var(--najwer23morselsFontFamily,var(--textBoxFontFamilyDefault));font-size:clamp(calc(var(--clampMinSize)/16*1rem),calc(var(--slope)*100vw + var(--intercept)/16*1rem),calc(var(--clampMaxSize)/16*1rem));font-weight:var(--najwer23morselsTextBoxFontWeight,var(--fw));line-height:var(--najwer23morselsTextBoxLineHeight,var(--lh,1.42857));margin:var(--najwer23morselsTextBoxMargin,var(--m));& a{color:var(--najwer23morselsTextBoxColor,var(--c));font-weight:var(--najwer23morselsTextBoxFontWeight,var(--fw));text-decoration:unset;transition:color .3s ease-in-out;&:active,&:focus-visible,&:hover{color:var(--najwer23morselsTextBoxColorHover,var(--ch,var(--c)));font-weight:var(--najwer23morselsTextBoxFontWeightHover,var(--fwh,var(--fw)));text-decoration:underline}}}}");const o=({tag:o="div",children:a,className:i,target:l,rel:n,mobileSize:s,desktopSize:m,lineHeight:c,color:v,href:x,colorHover:d,margin:f,fontWeight:h,fontWeightHover:p,...w})=>e(o,{style:{"--fw":h,"--fwh":p,"--ch":d,"--c":v,"--ms":s,"--ds":m,"--lh":c,...null!=f?{"--m":f}:{}},className:[r.morselsTextBox,"MorselsTextBox",i].filter(Boolean).join(" "),...w,children:[x&&t("a",{className:"MorselsTextBoxLink",href:x,target:l,rel:n,children:a}),!x&&a]});o.displayName="TextBox";export{o as TextBox};

package/lib/index.d.ts

@@ -1,2 +1,2 @@
-import { Button } from './Button';
-export { Button };
+import { TextBox } from './TextBox';
+export { TextBox };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najwer23morsels",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",
@@ -16,54 +16,45 @@
     "publish:minor": "yarn build && npm version minor --force && npm publish && rimraf ./lib && rimraf ./.yarn/cache",
     "publish:major": "yarn build && npm version major --force && npm publish && rimraf ./lib && rimraf ./.yarn/cache",
     "god": "yarn publish:patch",
-    "plop": "plop && yarn format",
+    "plop": "plop && yarn format && yarn start",
     "format": "prettier --write \"**/*.{json,mdx,ts,tsx,md,css,mjs}\"",
     "release": "yarn build && yarn && changeset && changeset version && changeset publish && rimraf ./lib && rimraf ./.yarn/cache"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.11",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@changesets/cli": "^2.29.5",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "0.4.4",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-console": "^3.0.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
-    "gh-pages": "^6.2.0",
+    "@storybook/react-vite": "^9.0.13",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "gh-pages": "^6.3.0",
     "plop": "^4.0.1",
-    "postcss": "^8.4.49",
-    "prettier": "^3.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.29.1",
-    "rollup-plugin-dts": "6.1.1",
-    "rollup-plugin-output-size": "^1.5.0",
+    "rollup": "^4.44.1",
+    "rollup-plugin-dts": "6.2.1",
+    "rollup-plugin-output-size": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "0.36.0",
-    "storybook": "^8.4.7",
+    "storybook": "^9.0.13",
     "storybook-css-modules-preset": "^1.1.1",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.5"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.0"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "keywords": [
     "react",
     "react 19",
     "storybook",
-    "storybook 8",
+    "storybook 9",
     "design-system",
     "gh-pages",
     "typescript",

package/public/icon/icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1080" viewBox="0 0 1080 1080">
+  <rect width="1080" height="1080" fill="black"/>
+</svg>

package/lib/Button.d.ts

@@ -1,3 +0,0 @@
-export declare const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    kind?: 'classic' | 'strawberry' | 'close' | 'calendar';
-}>;

package/lib/Button.js

@@ -1 +0,0 @@
-import{jsx as o}from"react/jsx-runtime";var e={classic:"Button-module_classic__WXpHW",close:"Button-module_close__huc4i",calendar:"Button-module_calendar__ae4lP",strawberry:"Button-module_strawberry__4z7d-"};!function(o,e){void 0===e&&(e={});var t=e.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=o:n.appendChild(document.createTextNode(o))}}('@layer najwer23snacksButton{.Button-module_calendar__ae4lP,.Button-module_classic__WXpHW,.Button-module_close__huc4i,.Button-module_strawberry__4z7d-{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--najwer23snacks-button-bg-color);border:unset;border-radius:8px;color:var(--najwer23snacks-button-font-color);cursor:pointer;font-family:var(--najwer23snacks-font-family);font-size:var(--najwer23snacks-button-font-size);font-weight:var(--najwer23snacks-button-font-weight);letter-spacing:normal;padding:10px 17px;transition:.1s;transition:background-color .3s,box-shadow .3s;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;@media (hover:hover) and (pointer:fine){&:hover{background-color:var(--najwer23snacks-button-bg-color-hover);box-shadow:var(--najwer23snacks-button-shadow)}}&:active{background-color:var(--najwer23snacks-button-bg-color-active);box-shadow:var(--najwer23snacks-button-shadow)}&:focus-visible{background-color:var(--najwer23snacks-button-bg-color-focus);box-shadow:var(--najwer23snacks-button-shadow);outline:none}&:disabled{background-color:var(--najwer23snacks-button-bg-color-disabled);box-shadow:none;cursor:not-allowed}}.Button-module_calendar__ae4lP{padding:7px 10px}.Button-module_strawberry__4z7d-{height:50px;padding:12px;&>*{display:flex;position:relative;&>*{background-color:#fff;border-radius:10px;height:4px;width:30px;&:after,&:before{background-color:#fff;border-radius:10px;content:"";position:absolute}&:after{bottom:-10px;left:0;right:0;top:10px}&:before{bottom:10px;left:0;right:0;top:-10px}}}}.Button-module_close__huc4i{height:50px;&>*{height:25px;position:relative;width:20px;&>*{&:after,&:before{background-color:#fff;border-radius:10px;content:"";height:4px;left:-9px;position:absolute;width:40px}&:before{top:10.5px;transform:rotate(45deg)}&:after{top:10.5px;transform:rotate(-45deg)}}}}}');const t=({children:t,kind:r="classic",...n})=>o("button",{type:"button",...n,className:e[r],children:"close"===r||"strawberry"===r?o("div",{children:o("div",{})}):t});t.displayName="Button";export{t as Button};