@twreporter/react-typescript-components 0.1.0-beta.5 → 0.1.0-beta.6

package/lib/styles.css

@@ -7,14 +7,23 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-gray-100: #f1f1f1;
+    --color-gray-200: #e2e2e2;
+    --color-gray-300: #cdcdcd;
+    --color-gray-400: #bbbbbb;
+    --color-gray-500: #9c9c9c;
     --color-gray-600: #808080;
     --color-gray-800: #404040;
     --spacing: 0.25rem;
     --font-weight-bold: 700;
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
-    --font-title: 'merriweather', 'source-han-serif-tc', serif;
-    --font-default: 'Roboto Slab', 'Noto Sans TC', sans-serif, 'Tauhu Oo';
+    --color-brand-heavy: #c40d23;
+    --color-supportive-faded: #f0d5be;
+    --color-supportive-pastel: #e3be98;
+    --color-gray-white: #ffffff;
+    --font-title: "merriweather", "source-han-serif-tc", serif;
+    --font-default: "Roboto Slab", "Noto Sans TC", sans-serif, "Tauhu Oo";
   }
 }
 @layer base {
@@ -163,24 +172,68 @@
   }
 }
 @layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
+  .mt-\[0px\] {
+    margin-top: 0px;
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
+  .mr-\[4px\] {
+    margin-right: 4px;
+  }
+  .mr-\[24px\] {
+    margin-right: 24px;
+  }
+  .ml-\[4px\] {
+    margin-left: 4px;
+  }
+  .box-border {
+    box-sizing: border-box;
+  }
   .flex {
     display: flex;
   }
+  .inline-block {
+    display: inline-block;
+  }
+  .size-\[18px\] {
+    width: 18px;
+    height: 18px;
+  }
+  .size-\[24px\] {
+    width: 24px;
+    height: 24px;
+  }
   .h-\[1px\] {
     height: 1px;
   }
   .w-full {
     width: 100%;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .flex-col {
     flex-direction: column;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .items-baseline {
     align-items: baseline;
   }
@@ -190,12 +243,44 @@
   .justify-between {
     justify-content: space-between;
   }
+  .justify-center {
+    justify-content: center;
+  }
   .gap-\[16px\] {
     gap: 16px;
   }
+  .overflow-x-scroll {
+    overflow-x: scroll;
+  }
+  .rounded-\[50\%\] {
+    border-radius: 50%;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-gray-400 {
+    border-color: var(--color-gray-400);
+  }
+  .border-t-gray-600 {
+    border-top-color: var(--color-gray-600);
+  }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
+  .\[mask-image\:linear-gradient\(to_left\,rgba\(241\,241\,241\,0\)\,\#f1f1f1_48px\)\] {
+    mask-image: linear-gradient(to left,rgba(241,241,241,0),#f1f1f1 48px);
+  }
+  .py-\[16px\] {
+    padding-block: 16px;
+  }
   .font-default {
     font-family: var(--font-default);
   }
@@ -241,12 +326,92 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .text-brand-heavy {
+    color: var(--color-brand-heavy);
+  }
+  .text-gray-100 {
+    color: var(--color-gray-100);
+  }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
   .text-gray-600 {
     color: var(--color-gray-600);
   }
   .text-gray-800 {
     color: var(--color-gray-800);
   }
+  .text-gray-white {
+    color: var(--color-gray-white);
+  }
+  .text-supportive-faded {
+    color: var(--color-supportive-faded);
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
+  .\[-webkit-mask-image\:linear-gradient\(to_left\,rgba\(241\,241\,241\,0\)\,\#f1f1f1_48px\)\] {
+    -webkit-mask-image: linear-gradient(to left,rgba(241,241,241,0),#f1f1f1 48px);
+  }
+  .last\:mr-0 {
+    &:last-child {
+      margin-right: calc(var(--spacing) * 0);
+    }
+  }
+  .hover\:text-brand-heavy {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-brand-heavy);
+      }
+    }
+  }
+  .hover\:text-gray-200 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-200);
+      }
+    }
+  }
+  .hover\:text-gray-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-400);
+      }
+    }
+  }
+  .hover\:text-gray-500 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-500);
+      }
+    }
+  }
+  .hover\:text-gray-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-white);
+      }
+    }
+  }
+  .hover\:text-supportive-pastel {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-supportive-pastel);
+      }
+    }
+  }
   .tablet\:text-\[16px\] {
     @media (width >= 768px) {
       font-size: 16px;
@@ -277,12 +442,22 @@
       font-size: 36px;
     }
   }
+  .desktop\:mt-\[0px\] {
+    @media (width >= 1024px) {
+      margin-top: 0px;
+    }
+  }
   .desktop\:mt-\[16px\] {
     @media (width >= 1024px) {
       margin-top: 16px;
     }
   }
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -294,6 +469,7 @@
 @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-leading: initial;
       --tw-font-weight: initial;
     }

package/lib/styles.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../tailwind-config/shared-styles.css"],"sourcesContent":["@import 'tailwindcss';\n\n@theme {\n  /* Brand */\n  --color-brand-faded: #f4c6c6;\n  --color-brand-pastel: #f76977;\n  --color-brand-main: #f80b28;\n  --color-brand-heavy: #c40d23;\n  --color-brand-dark: #9b051e;\n\n  /* Photography */\n  --color-photo-faded: #abdef4;\n  --color-photo-pastel: #6d9be0;\n  --color-photo-main: #2f58cc;\n  --color-photo-heavy: #143071;\n  --color-photo-dark: #052142;\n\n  /* Podcast */\n  --color-podcast-faded: #c4f2dc;\n  --color-podcast-pastel: #99ecc9;\n  --color-podcast-main: #6ee5b5;\n  --color-podcast-heavy: #3c927a;\n  --color-podcast-dark: #0e3532;\n\n  /* Supportive */\n  --color-supportive-faded: #f0d5be;\n  --color-supportive-pastel: #e3be98;\n  --color-supportive-main: #c09662;\n  --color-supportive-heavy: #9f7544;\n  --color-supportive-dark: #7a522c;\n\n  /* Grayscale */\n  --color-gray-white: #ffffff;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #e2e2e2;\n  --color-gray-300: #cdcdcd;\n  --color-gray-400: #bbbbbb;\n  --color-gray-500: #9c9c9c;\n  --color-gray-600: #808080;\n  --color-gray-700: #666666;\n  --color-gray-800: #404040;\n  --color-gray-900: #262626;\n  --color-gray-black: #000000;\n\n  /* Opacity colors */\n  --color-opacity-white-0: rgba(255, 255, 255, 0.0);\n  --color-opacity-white-02: rgba(255, 255, 255, 0.2);\n  --color-opacity-white-05: rgba(255, 255, 255, 0.5);\n  --color-opacity-white-08: rgba(255, 255, 255, 0.8);\n  --color-opacity-white-09: rgba(255, 255, 255, 0.9);\n  --color-opacity-gray100-08: rgba(241, 241, 241, 0.8);\n  --color-opacity-black-01: rgba(0, 0, 0, 0.1);\n  --color-opacity-black-02: rgba(0, 0, 0, 0.2);\n  --color-opacity-black-05: rgba(0, 0, 0, 0.5);\n  --color-opacity-black-07: rgba(0, 0, 0, 0.7);\n  --color-opacity-black-08: rgba(0, 0, 0, 0.8);\n  --color-opacity-black-005: rgba(0, 0, 0, 0.05);\n\n  /* Semantic */\n  --color-semantic-danger: #c7000a;\n  --color-semantic-success: #4db41d;\n  --color-semantic-info: #1a7aeb;\n  --color-semantic-warning: #fcaa0c;\n\n  /* Pink Article */\n  --color-pink-article-light-blue: #2440fb;\n  --color-pink-article-blue: #355ed3;\n  --color-pink-article-dark-blue: #08192d;\n  --color-pink-article-light-pink: #fadaf5;\n  --color-pink-article-pink: #fbafef;\n  --color-pink-article-dark-pink: #ef7ede;\n\n  /* Font families */\n  --font-title: 'merriweather', 'source-han-serif-tc', serif;\n  --font-default: 'Roboto Slab', 'Noto Sans TC', sans-serif, 'Tauhu Oo';\n  --font-default-fallback: 'Roboto Slab', sans-serif;\n\n  /* Font weights */\n  --font-weight-extra-light: 100;\n  --font-weight-normal: 400;\n  --font-weight-bold: 700;\n\n  /* Screen breakpoint */\n  --breakpoint-tablet: 768px;\n  --breakpoint-desktop: 1024px;\n  --breakpoint-hd: 1440px;\n}\n"],"mappings":";;;AAEA,OAAO,EAEL,mBAAmB,EAAE,OAAO,EAC5B,oBAAoB,EAAE,OAAO,EAC7B,kBAAkB,EAAE,OAAO,EAC3B,mBAAmB,EAAE,OAAO,EAC5B,kBAAkB,EAAE,OAAO,EAG3B,mBAAmB,EAAE,OAAO,EAC5B,oBAAoB,EAAE,OAAO,EAC7B,kBAAkB,EAAE,OAAO,EAC3B,mBAAmB,EAAE,OAAO,EAC5B,kBAAkB,EAAE,OAAO,EAG3B,qBAAqB,EAAE,OAAO,EAC9B,sBAAsB,EAAE,OAAO,EAC/B,oBAAoB,EAAE,OAAO,EAC7B,qBAAqB,EAAE,OAAO,EAC9B,oBAAoB,EAAE,OAAO,EAG7B,wBAAwB,EAAE,OAAO,EACjC,yBAAyB,EAAE,OAAO,EAClC,uBAAuB,EAAE,OAAO,EAChC,wBAAwB,EAAE,OAAO,EACjC,uBAAuB,EAAE,OAAO,EAGhC,kBAAkB,EAAE,OAAO,EAC3B,gBAAgB,EAAE,OAAO,EACzB,gBAAgB,EAAE,OAAO,EACzB,gBAAgB,EAAE,OAAO,EACzB,gBAAgB,EAAE,OAAO,EACzB,gBAAgB,EAAE,OAAO,EACzB,gBAAgB,EAAE,OAAO,EACzB,gBAAgB,EAAE,OAAO,EACzB,gBAAgB,EAAE,OAAO,EACzB,gBAAgB,EAAE,OAAO,EACzB,kBAAkB,EAAE,OAAO,EAG3B,uBAAuB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EACjD,wBAAwB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAClD,wBAAwB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAClD,wBAAwB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAClD,wBAAwB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAClD,0BAA0B,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EACpD,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAC5C,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAC5C,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAC5C,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAC5C,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAC5C,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAG9C,uBAAuB,EAAE,OAAO,EAChC,wBAAwB,EAAE,OAAO,EACjC,qBAAqB,EAAE,OAAO,EAC9B,wBAAwB,EAAE,OAAO,EAGjC,+BAA+B,EAAE,OAAO,EACxC,yBAAyB,EAAE,OAAO,EAClC,8BAA8B,EAAE,OAAO,EACvC,+BAA+B,EAAE,OAAO,EACxC,yBAAyB,EAAE,OAAO,EAClC,8BAA8B,EAAE,OAAO,EAGvC,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,KAAK,EAC1D,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EACrE,uBAAuB,EAAE,aAAa,EAAE,UAAU,EAGlD,yBAAyB,EAAE,GAAG,EAC9B,oBAAoB,EAAE,GAAG,EACzB,kBAAkB,EAAE,GAAG,EAGvB,mBAAmB,EAAE,KAAK,EAC1B,oBAAoB,EAAE,MAAM,EAC5B,eAAe,EAAE,MAAM;","names":[]}
+{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-100: #f1f1f1;\n    --color-gray-200: #e2e2e2;\n    --color-gray-300: #cdcdcd;\n    --color-gray-400: #bbbbbb;\n    --color-gray-500: #9c9c9c;\n    --color-gray-600: #808080;\n    --color-gray-800: #404040;\n    --spacing: 0.25rem;\n    --font-weight-bold: 700;\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-brand-heavy: #c40d23;\n    --color-supportive-faded: #f0d5be;\n    --color-supportive-pastel: #e3be98;\n    --color-gray-white: #ffffff;\n    --font-title: \"merriweather\", \"source-han-serif-tc\", serif;\n    --font-default: \"Roboto Slab\", \"Noto Sans TC\", sans-serif, \"Tauhu Oo\";\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    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\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    -webkit-appearance: button;\n       -moz-appearance: button;\n            appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .mt-\\[0px\\] {\n    margin-top: 0px;\n  }\n  .mt-\\[8px\\] {\n    margin-top: 8px;\n  }\n  .mr-\\[4px\\] {\n    margin-right: 4px;\n  }\n  .mr-\\[24px\\] {\n    margin-right: 24px;\n  }\n  .ml-\\[4px\\] {\n    margin-left: 4px;\n  }\n  .box-border {\n    box-sizing: border-box;\n  }\n  .flex {\n    display: flex;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .size-\\[18px\\] {\n    width: 18px;\n    height: 18px;\n  }\n  .size-\\[24px\\] {\n    width: 24px;\n    height: 24px;\n  }\n  .h-\\[1px\\] {\n    height: 1px;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .items-baseline {\n    align-items: baseline;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .gap-\\[16px\\] {\n    gap: 16px;\n  }\n  .overflow-x-scroll {\n    overflow-x: scroll;\n  }\n  .rounded-\\[50\\%\\] {\n    border-radius: 50%;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-gray-400 {\n    border-color: var(--color-gray-400);\n  }\n  .border-t-gray-600 {\n    border-top-color: var(--color-gray-600);\n  }\n  .bg-gray-300 {\n    background-color: var(--color-gray-300);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .\\[mask-image\\:linear-gradient\\(to_left\\,rgba\\(241\\,241\\,241\\,0\\)\\,\\#f1f1f1_48px\\)\\] {\n    -webkit-mask-image: linear-gradient(to left,rgba(241,241,241,0),#f1f1f1 48px);\n            mask-image: linear-gradient(to left,rgba(241,241,241,0),#f1f1f1 48px);\n  }\n  .py-\\[16px\\] {\n    padding-block: 16px;\n  }\n  .font-default {\n    font-family: var(--font-default);\n  }\n  .font-title {\n    font-family: var(--font-title);\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .text-\\[14px\\] {\n    font-size: 14px;\n  }\n  .text-\\[16px\\] {\n    font-size: 16px;\n  }\n  .text-\\[17px\\] {\n    font-size: 17px;\n  }\n  .text-\\[18px\\] {\n    font-size: 18px;\n  }\n  .text-\\[22px\\] {\n    font-size: 22px;\n  }\n  .text-\\[24px\\] {\n    font-size: 24px;\n  }\n  .text-\\[28px\\] {\n    font-size: 28px;\n  }\n  .leading-\\[125\\%\\] {\n    --tw-leading: 125%;\n    line-height: 125%;\n  }\n  .leading-\\[150\\%\\] {\n    --tw-leading: 150%;\n    line-height: 150%;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .text-brand-heavy {\n    color: var(--color-brand-heavy);\n  }\n  .text-gray-100 {\n    color: var(--color-gray-100);\n  }\n  .text-gray-200 {\n    color: var(--color-gray-200);\n  }\n  .text-gray-300 {\n    color: var(--color-gray-300);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-800 {\n    color: var(--color-gray-800);\n  }\n  .text-gray-white {\n    color: var(--color-gray-white);\n  }\n  .text-supportive-faded {\n    color: var(--color-supportive-faded);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .\\[-webkit-mask-image\\:linear-gradient\\(to_left\\,rgba\\(241\\,241\\,241\\,0\\)\\,\\#f1f1f1_48px\\)\\] {\n    -webkit-mask-image: linear-gradient(to left,rgba(241,241,241,0),#f1f1f1 48px);\n  }\n  .last\\:mr-0 {\n    &:last-child {\n      margin-right: calc(var(--spacing) * 0);\n    }\n  }\n  .hover\\:text-brand-heavy {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-brand-heavy);\n      }\n    }\n  }\n  .hover\\:text-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:text-gray-400 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-400);\n      }\n    }\n  }\n  .hover\\:text-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-gray-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-white);\n      }\n    }\n  }\n  .hover\\:text-supportive-pastel {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-supportive-pastel);\n      }\n    }\n  }\n  .tablet\\:text-\\[16px\\] {\n    @media (width >= 768px) {\n      font-size: 16px;\n    }\n  }\n  .tablet\\:text-\\[18px\\] {\n    @media (width >= 768px) {\n      font-size: 18px;\n    }\n  }\n  .tablet\\:text-\\[22px\\] {\n    @media (width >= 768px) {\n      font-size: 22px;\n    }\n  }\n  .tablet\\:text-\\[28px\\] {\n    @media (width >= 768px) {\n      font-size: 28px;\n    }\n  }\n  .tablet\\:text-\\[32px\\] {\n    @media (width >= 768px) {\n      font-size: 32px;\n    }\n  }\n  .tablet\\:text-\\[36px\\] {\n    @media (width >= 768px) {\n      font-size: 36px;\n    }\n  }\n  .desktop\\:mt-\\[0px\\] {\n    @media (width >= 1024px) {\n      margin-top: 0px;\n    }\n  }\n  .desktop\\:mt-\\[16px\\] {\n    @media (width >= 1024px) {\n      margin-top: 16px;\n    }\n  }\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n    }\n  }\n}\n"],"mappings":"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","names":[]}

package/lib/text/heading.d.mts

@@ -1,28 +1,28 @@
-import React__default from 'react';
+import react__default from 'react';
 import { Type, TYPE } from './enum/index.mjs';
 import '../types/index.mjs';
 
-type HeadingProps = React__default.HTMLAttributes<HTMLHeadingElement> & {
+type HeadingProps = react__default.HTMLAttributes<HTMLHeadingElement> & {
     text?: string;
     type?: Type;
     className?: string;
 };
-declare const H1: React__default.FC<HeadingProps> & {
+declare const H1: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H2: React__default.FC<HeadingProps> & {
+declare const H2: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H3: React__default.FC<HeadingProps> & {
+declare const H3: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H4: React__default.FC<HeadingProps> & {
+declare const H4: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H5: React__default.FC<HeadingProps> & {
+declare const H5: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H6: React__default.FC<HeadingProps> & {
+declare const H6: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
 

package/lib/text/heading.d.ts

@@ -1,28 +1,28 @@
-import React__default from 'react';
+import react__default from 'react';
 import { Type, TYPE } from './enum/index.js';
 import '../types/index.js';
 
-type HeadingProps = React__default.HTMLAttributes<HTMLHeadingElement> & {
+type HeadingProps = react__default.HTMLAttributes<HTMLHeadingElement> & {
     text?: string;
     type?: Type;
     className?: string;
 };
-declare const H1: React__default.FC<HeadingProps> & {
+declare const H1: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H2: React__default.FC<HeadingProps> & {
+declare const H2: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H3: React__default.FC<HeadingProps> & {
+declare const H3: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H4: React__default.FC<HeadingProps> & {
+declare const H4: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H5: React__default.FC<HeadingProps> & {
+declare const H5: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
-declare const H6: React__default.FC<HeadingProps> & {
+declare const H6: react__default.FC<HeadingProps> & {
     Type: typeof TYPE;
 };
 

package/lib/text/paragraph.d.mts

@@ -1,22 +1,22 @@
-import React__default from 'react';
+import react__default from 'react';
 import { Weight, WEIGHT } from './enum/index.mjs';
 import '../types/index.mjs';
 
-type ParagraphProps = React__default.HTMLAttributes<HTMLParagraphElement> & {
+type ParagraphProps = react__default.HTMLAttributes<HTMLParagraphElement> & {
     text?: string;
     weight?: Weight;
     className?: string;
 };
-declare const P1: React__default.FC<ParagraphProps> & {
+declare const P1: react__default.FC<ParagraphProps> & {
     Weight: typeof WEIGHT;
 };
-declare const P2: React__default.FC<ParagraphProps> & {
+declare const P2: react__default.FC<ParagraphProps> & {
     Weight: typeof WEIGHT;
 };
-declare const P3: React__default.FC<ParagraphProps> & {
+declare const P3: react__default.FC<ParagraphProps> & {
     Weight: typeof WEIGHT;
 };
-declare const P4: React__default.FC<ParagraphProps> & {
+declare const P4: react__default.FC<ParagraphProps> & {
     Weight: typeof WEIGHT;
 };
 

package/lib/text/paragraph.d.ts

@@ -1,22 +1,22 @@
-import React__default from 'react';
+import react__default from 'react';
 import { Weight, WEIGHT } from './enum/index.js';
 import '../types/index.js';
 
-type ParagraphProps = React__default.HTMLAttributes<HTMLParagraphElement> & {
+type ParagraphProps = react__default.HTMLAttributes<HTMLParagraphElement> & {
     text?: string;
     weight?: Weight;
     className?: string;
 };
-declare const P1: React__default.FC<ParagraphProps> & {
+declare const P1: react__default.FC<ParagraphProps> & {
     Weight: typeof WEIGHT;
 };
-declare const P2: React__default.FC<ParagraphProps> & {
+declare const P2: react__default.FC<ParagraphProps> & {
     Weight: typeof WEIGHT;
 };
-declare const P3: React__default.FC<ParagraphProps> & {
+declare const P3: react__default.FC<ParagraphProps> & {
     Weight: typeof WEIGHT;
 };
-declare const P4: React__default.FC<ParagraphProps> & {
+declare const P4: react__default.FC<ParagraphProps> & {
     Weight: typeof WEIGHT;
 };
 

package/lib/text/stories/heading.stories.d.mts

@@ -0,0 +1,35 @@
+import { Type, TYPE } from '../enum/index.mjs';
+import * as react from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import '../../types/index.mjs';
+
+declare const meta: {
+    title: string;
+    component: react.FC<react.HTMLAttributes<HTMLHeadingElement> & {
+        text?: string;
+        type?: Type;
+        className?: string;
+    }> & {
+        Type: typeof TYPE;
+    };
+    argTypes: {
+        type: {
+            defaultValue: "article" | "default";
+            options: string[];
+            mapping: Record<string, "article" | "default">;
+            control: {
+                type: "radio";
+            };
+        };
+    };
+};
+
+type Story = StoryObj<typeof meta>;
+declare const h1: Story;
+declare const h2: Story;
+declare const h3: Story;
+declare const h4: Story;
+declare const h5: Story;
+declare const h6: Story;
+
+export { meta as default, h1, h2, h3, h4, h5, h6 };

package/lib/text/stories/heading.stories.d.ts

@@ -0,0 +1,35 @@
+import { Type, TYPE } from '../enum/index.js';
+import * as react from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import '../../types/index.js';
+
+declare const meta: {
+    title: string;
+    component: react.FC<react.HTMLAttributes<HTMLHeadingElement> & {
+        text?: string;
+        type?: Type;
+        className?: string;
+    }> & {
+        Type: typeof TYPE;
+    };
+    argTypes: {
+        type: {
+            defaultValue: "article" | "default";
+            options: string[];
+            mapping: Record<string, "article" | "default">;
+            control: {
+                type: "radio";
+            };
+        };
+    };
+};
+
+type Story = StoryObj<typeof meta>;
+declare const h1: Story;
+declare const h2: Story;
+declare const h3: Story;
+declare const h4: Story;
+declare const h5: Story;
+declare const h6: Story;
+
+export { meta as default, h1, h2, h3, h4, h5, h6 };

package/lib/text/stories/heading.stories.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var clsx = require('clsx');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/storybook/utils/get-enum-arg.ts
+function getRadioArgFromEnum(enumObject, defaultValue) {
+  const keys = Object.keys(enumObject).filter(
+    (key) => Number.isNaN(Number(key))
+  );
+  const mapping = {};
+  keys.forEach((key) => {
+    mapping[key] = enumObject[key];
+  });
+  const defaultKey = keys.find((key) => enumObject[key] === defaultValue) || keys[0];
+  return {
+    defaultValue: enumObject[defaultKey],
+    options: keys,
+    mapping,
+    control: { type: "radio" }
+  };
+}
+
+// src/text/enum/index.ts
+var TYPE = {
+  default: "default",
+  article: "article"
+};
+
+// src/text/heading.tsx
+var baseClass = "font-bold";
+var variantClass = {
+  H1: "text-[28px] leading-[125%] tablet:text-[36px]",
+  H2: "text-[24px] leading-[125%] tablet:text-[32px]",
+  H3: "text-[22px] leading-[150%] tablet:text-[28px]",
+  H4: "text-[18px] leading-[150%] tablet:text-[22px]",
+  H5: "text-[17px] leading-[150%] tablet:text-[18px]",
+  H6: "text-[16px] leading-[150%] tablet:text-[16px]"
+};
+var HeadingVariant = (variant) => {
+  const Component = ({
+    text = "",
+    type = TYPE.default,
+    className = "",
+    ...props
+  }) => {
+    const htmlTag = variant.toLowerCase();
+    const fontFamily = type === TYPE.article ? "font-title" : "font-default";
+    return React__default.default.createElement(
+      htmlTag,
+      {
+        className: clsx__default.default(
+          fontFamily,
+          baseClass,
+          variantClass[variant],
+          className
+        ),
+        ...props
+      },
+      text
+    );
+  };
+  Component.displayName = variant;
+  Component.Type = TYPE;
+  return Component;
+};
+var H1 = HeadingVariant("H1");
+var H2 = HeadingVariant("H2");
+var H3 = HeadingVariant("H3");
+var H4 = HeadingVariant("H4");
+var H5 = HeadingVariant("H5");
+var H6 = HeadingVariant("H6");
+var meta = {
+  title: "Text/Headline",
+  component: H1,
+  argTypes: {
+    type: getRadioArgFromEnum(H1.Type, H1.Type.default)
+  }
+};
+var heading_stories_default = meta;
+var defaultArg = {
+  text: "\u6A19\u984C\u300C\u6A19\u984C\u300D\uFF1A\u6A19\u984C\uFF0C\u300A\u6A19\u984C\u300B\u6A19\u984CEnglish\u6A19\u984C123\u6A19\u984C\uFF1F",
+  type: H1.Type.default
+};
+var h1 = {
+  args: defaultArg,
+  parameters: { controls: { exclude: ["className"] } }
+};
+var h2 = {
+  render: (args) => /* @__PURE__ */ jsxRuntime.jsx(H2, { ...args }),
+  args: defaultArg,
+  parameters: { controls: { exclude: ["className"] } }
+};
+var h3 = {
+  render: (args) => /* @__PURE__ */ jsxRuntime.jsx(H3, { ...args }),
+  args: defaultArg,
+  parameters: { controls: { exclude: ["className"] } }
+};
+var h4 = {
+  render: (args) => /* @__PURE__ */ jsxRuntime.jsx(H4, { ...args }),
+  args: defaultArg,
+  parameters: { controls: { exclude: ["className"] } }
+};
+var h5 = {
+  render: (args) => /* @__PURE__ */ jsxRuntime.jsx(H5, { ...args }),
+  args: defaultArg,
+  parameters: { controls: { exclude: ["className"] } }
+};
+var h6 = {
+  render: (args) => /* @__PURE__ */ jsxRuntime.jsx(H6, { ...args }),
+  args: defaultArg,
+  parameters: { controls: { exclude: ["className"] } }
+};
+
+exports.default = heading_stories_default;
+exports.h1 = h1;
+exports.h2 = h2;
+exports.h3 = h3;
+exports.h4 = h4;
+exports.h5 = h5;
+exports.h6 = h6;
+//# sourceMappingURL=heading.stories.js.map
+//# sourceMappingURL=heading.stories.js.map

package/lib/text/stories/heading.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/storybook/utils/get-enum-arg.ts","../../../src/text/enum/index.ts","../../../src/text/heading.tsx","../../../src/text/stories/heading.stories.tsx"],"names":["React","clsx","jsx"],"mappings":"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","file":"heading.stories.js","sourcesContent":["type RadioArgObject<T> = {\n  defaultValue: T\n  options: T[]\n  control: { type: 'radio' }\n}\n\nexport function getRadioArgFromObject<T extends string | number>(\n  object: Record<string, T>,\n  defaultValue: T\n): RadioArgObject<T> {\n  return {\n    defaultValue,\n    options: Object.values(object),\n    control: { type: 'radio' },\n  }\n}\n\ntype RadioArgEnum<E> = {\n  defaultValue: E\n  options: string[]\n  mapping: Record<string, E>\n  control: { type: 'radio' }\n}\n\nexport function getRadioArgFromEnum<E extends Record<string, string | number>>(\n  enumObject: E,\n  defaultValue: E[keyof E]\n): RadioArgEnum<E[keyof E]> {\n  // Only keep \"real\" keys (filter numeric reverse mapping)\n  const keys = Object.keys(enumObject).filter((key) =>\n    Number.isNaN(Number(key))\n  )\n\n  const mapping: Record<string, E[keyof E]> = {}\n  keys.forEach((key) => {\n    mapping[key] = enumObject[key as keyof E]\n  })\n\n  // Find the key corresponding to the default value\n  const defaultKey =\n    keys.find((key) => enumObject[key as keyof E] === defaultValue) || keys[0]\n\n  return {\n    defaultValue: enumObject[defaultKey as keyof E],\n    options: keys,\n    mapping,\n    control: { type: 'radio' },\n  }\n}\n","import type { ValuesOf } from '../../types'\n\nexport const TYPE = {\n  default: 'default',\n  article: 'article',\n} as const\n\nexport type Type = ValuesOf<typeof TYPE>\n\nexport const WEIGHT = {\n  extraLight: 'extra-light',\n  normal: 'normal',\n  bold: 'bold',\n} as const\n\nexport type Weight = ValuesOf<typeof WEIGHT>\n","import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './enum'\n\ntype HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {\n  text?: string\n  type?: Type\n  className?: string\n}\n\nconst baseClass = 'font-bold'\n\nconst variantClass = {\n  H1: 'text-[28px] leading-[125%] tablet:text-[36px]',\n  H2: 'text-[24px] leading-[125%] tablet:text-[32px]',\n  H3: 'text-[22px] leading-[150%] tablet:text-[28px]',\n  H4: 'text-[18px] leading-[150%] tablet:text-[22px]',\n  H5: 'text-[17px] leading-[150%] tablet:text-[18px]',\n  H6: 'text-[16px] leading-[150%] tablet:text-[16px]',\n}\n\nconst HeadingVariant = (variant: keyof typeof variantClass) => {\n  const Component: React.FC<HeadingProps> & { Type: typeof TYPE } = ({\n    text = '',\n    type = TYPE.default,\n    className = '',\n    ...props\n  }) => {\n    const htmlTag = variant.toLowerCase() // 產生 'h1', 'h2', ...\n    const fontFamily = type === TYPE.article ? 'font-title' : 'font-default'\n    return React.createElement(\n      htmlTag,\n      {\n        className: clsx(\n          fontFamily,\n          baseClass,\n          variantClass[variant],\n          className\n        ),\n        ...props,\n      },\n      text\n    )\n  }\n  Component.displayName = variant\n  Component.Type = TYPE\n  return Component\n}\n\nconst H1 = HeadingVariant('H1')\nconst H2 = HeadingVariant('H2')\nconst H3 = HeadingVariant('H3')\nconst H4 = HeadingVariant('H4')\nconst H5 = HeadingVariant('H5')\nconst H6 = HeadingVariant('H6')\n\nexport { H1, H2, H3, H4, H5, H6 }\n","import type { Meta, StoryObj } from '@storybook/react-vite'\n// utils\nimport { getRadioArgFromEnum } from '../../storybook/utils/get-enum-arg'\n// components\nimport { H1, H2, H3, H4, H5, H6 } from '../heading'\n\nconst meta = {\n  title: 'Text/Headline',\n  component: H1,\n  argTypes: {\n    type: getRadioArgFromEnum(H1.Type, H1.Type.default),\n  },\n} satisfies Meta<typeof H1>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst defaultArg = {\n  text: '標題「標題」：標題，《標題》標題English標題123標題？',\n  type: H1.Type.default,\n}\n\nexport const h1: Story = {\n  args: defaultArg,\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const h2: Story = {\n  render: (args) => <H2 {...args} />,\n  args: defaultArg,\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const h3: Story = {\n  render: (args) => <H3 {...args} />,\n  args: defaultArg,\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const h4: Story = {\n  render: (args) => <H4 {...args} />,\n  args: defaultArg,\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const h5: Story = {\n  render: (args) => <H5 {...args} />,\n  args: defaultArg,\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const h6: Story = {\n  render: (args) => <H6 {...args} />,\n  args: defaultArg,\n  parameters: { controls: { exclude: ['className'] } },\n}\n"]}