@fpkit/acss 0.5.3 → 0.5.5

package/src/components/text-to-speech/TextToSpeech.stories.tsx

@@ -1,35 +1,34 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import TextToSpeech from './TextToSpeech'
-import './text-to-speech.scss'
+import { Meta, StoryObj } from "@storybook/react";
+import TextToSpeech from "./TextToSpeech";
+import "./text-to-speech.scss";
 
 const meta: Meta<typeof TextToSpeech> = {
-  title: 'FP.REACT Components/TextToSpeech',
+  title: "FP.REACT Components/TextToSpeech",
   component: TextToSpeech,
-  tags: ['autodocs'],
+  tags: ["experimental"],
   argTypes: {
     voice: {
       control: {
-        type: 'select',
+        type: "select",
         options: [
-          'Google US English',
-          'Google UK English Female',
-          'Google UK English Male',
+          "Google US English",
+          "Google UK English Female",
+          "Google UK English Male",
         ],
       },
     },
   },
-} as Story
+} as Story;
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof TextToSpeech>
+type Story = StoryObj<typeof TextToSpeech>;
 
 export const Default: Story = {
   args: {
-    label: 'Read post',
+    label: "Read post",
     initialText:
-      'Hello, how are you? I am a Text to Speech (TTS) assistant! Update this text and click the [speak] button to hear the change.',
+      "Hello, how are you? I am a Text to Speech (TTS) assistant! Update this text and click the [speak] button to hear the change.",
   },
   parameters: {
     docs: {
@@ -39,13 +38,13 @@ export const Default: Story = {
       },
     },
   },
-} as Story
+} as Story;
 
 export const WithText: Story = {
   args: {
     // Add props to simulate text input
     initialText:
-      'This is a test of the text to speech component. Here the test is passed as a prop and the text input is hidden.',
+      "This is a test of the text to speech component. Here the test is passed as a prop and the text input is hidden.",
     showTextInput: false,
   },
   parameters: {
@@ -56,90 +55,90 @@ export const WithText: Story = {
       },
     },
   },
-} as Story
+} as Story;
 
-export const FullFeature: Story = {
-  args: {
-    initialText:
-      'Welcome to the full-featured Text-to-Speech component. You can modify this text, choose a voice, adjust pitch and rate, and then click the speak button to hear it.',
-    showTextInput: true,
-    pitch: 1,
-    rate: 1,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "This story showcases all features of the TextToSpeechComponent, including text input, voice selection, pitch and rate adjustment. It provides a comprehensive demonstration of the component's capabilities.",
-      },
-    },
-  },
-  render: (args) => {
-    const [selectedVoice, setSelectedVoice] = React.useState<
-      SpeechSynthesisVoice | undefined
-    >(undefined)
-    const [pitch, setPitch] = React.useState(1)
-    const [rate, setRate] = React.useState(1)
+// export const FullFeature: Story = {
+//   args: {
+//     initialText:
+//       "Welcome to the full-featured Text-to-Speech component. You can modify this text, choose a voice, adjust pitch and rate, and then click the speak button to hear it.",
+//     showTextInput: true,
+//     pitch: 1,
+//     rate: 1,
+//   },
+//   parameters: {
+//     docs: {
+//       description: {
+//         story:
+//           "This story showcases all features of the TextToSpeechComponent, including text input, voice selection, pitch and rate adjustment. It provides a comprehensive demonstration of the component's capabilities.",
+//       },
+//     },
+//   },
+//   render: (args) => {
+//     const [selectedVoice, setSelectedVoice] = React.useState<
+//       SpeechSynthesisVoice | undefined
+//     >(undefined);
+//     const [pitch, setPitch] = React.useState(1);
+//     const [rate, setRate] = React.useState(1);
 
-    React.useEffect(() => {
-      const voices = window.speechSynthesis.getVoices()
-      setSelectedVoice(
-        voices.find((voice) => voice.name === 'Google US English') || voices[0],
-      )
-    }, [])
+//     React.useEffect(() => {
+//       const voices = window.speechSynthesis.getVoices();
+//       setSelectedVoice(
+//         voices.find((voice) => voice.name === "Google US English") || voices[0]
+//       );
+//     }, []);
 
-    return (
-      <div>
-        <TextToSpeech
-          {...args}
-          voice={selectedVoice}
-          pitch={pitch}
-          rate={rate}
-        />
-        <div style={{ marginTop: '20px' }}>
-          <label htmlFor="voice-select">Select Voice: </label>
-          <select
-            id="voice-select"
-            onChange={(e) =>
-              setSelectedVoice(
-                window.speechSynthesis
-                  .getVoices()
-                  .find((v) => v.name === e.target.value),
-              )
-            }
-          >
-            {window.speechSynthesis.getVoices().map((voice) => (
-              <option key={voice.name} value={voice.name}>
-                {voice.name} ({voice.lang})
-              </option>
-            ))}
-          </select>
-        </div>
-        <div style={{ marginTop: '10px' }}>
-          <label htmlFor="pitch-range">Pitch: {pitch}</label>
-          <input
-            id="pitch-range"
-            type="range"
-            min="0.5"
-            max="2"
-            step="0.1"
-            value={pitch}
-            onChange={(e) => setPitch(parseFloat(e.target.value))}
-          />
-        </div>
-        <div style={{ marginTop: '10px' }}>
-          <label htmlFor="rate-range">Rate: {rate}</label>
-          <input
-            id="rate-range"
-            type="range"
-            min="0.5"
-            max="2"
-            step="0.1"
-            value={rate}
-            onChange={(e) => setRate(parseFloat(e.target.value))}
-          />
-        </div>
-      </div>
-    )
-  },
-} as Story
+//     return (
+//       <div>
+//         <TextToSpeech
+//           {...args}
+//           voice={selectedVoice}
+//           pitch={pitch}
+//           rate={rate}
+//         />
+//         <div style={{ marginTop: "20px" }}>
+//           <label htmlFor="voice-select">Select Voice: </label>
+//           <select
+//             id="voice-select"
+//             onChange={(e) =>
+//               setSelectedVoice(
+//                 window.speechSynthesis
+//                   .getVoices()
+//                   .find((v) => v.name === e.target.value)
+//               )
+//             }
+//           >
+//             {window.speechSynthesis.getVoices().map((voice) => (
+//               <option key={voice.name} value={voice.name}>
+//                 {voice.name} ({voice.lang})
+//               </option>
+//             ))}
+//           </select>
+//         </div>
+//         <div style={{ marginTop: "10px" }}>
+//           <label htmlFor="pitch-range">Pitch: {pitch}</label>
+//           <input
+//             id="pitch-range"
+//             type="range"
+//             min="0.5"
+//             max="2"
+//             step="0.1"
+//             value={pitch}
+//             onChange={(e) => setPitch(parseFloat(e.target.value))}
+//           />
+//         </div>
+//         <div style={{ marginTop: "10px" }}>
+//           <label htmlFor="rate-range">Rate: {rate}</label>
+//           <input
+//             id="rate-range"
+//             type="range"
+//             min="0.5"
+//             max="2"
+//             step="0.1"
+//             value={rate}
+//             onChange={(e) => setRate(parseFloat(e.target.value))}
+//           />
+//         </div>
+//       </div>
+//     );
+//   },
+// } as Story;

package/src/index.scss

@@ -1,21 +1,22 @@
-@import './sass/reset';
-@import './sass/layout';
-@import './sass/type';
-@import './sass/properties';
-@import './sass/globals';
-@import './sass/elements';
-@import './components/buttons/button.scss';
-@import './components/tag/tag.scss';
-@import './components/images/img.scss';
-@import './components/cards/card.scss';
-@import './components/progress/progress.scss';
-@import './components/details/details.scss';
-@import './components/link/link.scss';
-@import './components/layout/landmarks.scss';
-@import './sass/_grid.scss';
-@import './components/badge/badge.scss';
-@import './components/nav/nav.scss';
-@import './components/form/form.scss';
-@import './components/breadcrumbs/breadcrumb.scss';
-@import './components/text-to-speech/text-to-speech.scss';
-@import './sass/styles';
+@import "./sass/reset";
+@import "./sass/layout";
+@import "./sass/type";
+@import "./sass/properties";
+@import "./sass/globals";
+@import "./sass/elements";
+@import "./components/buttons/button.scss";
+@import "./components/tag/tag.scss";
+@import "./components/images/img.scss";
+@import "./components/cards/card.scss";
+@import "./components/progress/progress.scss";
+@import "./components/details/details.scss";
+@import "./components/link/link.scss";
+@import "./components/layout/landmarks.scss";
+@import "./components/dialog/dialog.scss";
+@import "./sass/_grid.scss";
+@import "./components/badge/badge.scss";
+@import "./components/nav/nav.scss";
+@import "./components/form/form.scss";
+@import "./components/breadcrumbs/breadcrumb.scss";
+@import "./components/text-to-speech/text-to-speech.scss";
+@import "./sass/styles";

package/src/index.ts

@@ -1,35 +1,36 @@
-import { TextToSpeech } from './components/text-to-speech/TextToSpeech'
+// import { TextToSpeech } from "./components/text-to-speech/TextToSpeech";
 // import { Popover } from './hooks/popover/popover'
 // export { Textarea } from './components/form/textarea';
+// export { ModalDialog as Dialog } from "./components/modal/dialog";
 
-export { Button } from './components/buttons/button'
-export { Card } from './components/cards/card'
-export { Dialog } from './components/modal/dialog'
-export { Field } from './components/form/fields'
-export * from './components/layout/landmarks'
-export * from './components/layout/landmarks'
-export { Icon } from './components/icons/icon'
-export { Img } from './components/images/img'
-export { Input } from './components/form/inputs'
-export { Link } from './components/link/link'
-export { List } from './components/list/list'
-export { Modal } from './components/modal/modal'
-export * from './components/nav/nav'
-export { Popover } from './components/popover/popover'
-export { RenderTable as TBL } from './components/tables/table'
-export * from './components/tag/tag'
-export * from './components/tables/table-elements'
-export * from './components/details/details'
-export * from './components/text/text'
-export * from './components/form/textarea'
-export * from './components/nav/nav'
-export * from './components/heading/heading'
-export * from './components/breadcrumbs/breadcrumb'
-export * from './components/text-to-speech/TextToSpeech'
-export { TextToSpeech } from './components/text-to-speech/TextToSpeech'
+export { Button } from "./components/buttons/button";
+export { Card } from "./components/cards/card";
+export { Field } from "./components/form/fields";
+export * from "./components/layout/landmarks";
+export * from "./components/layout/landmarks";
+export { Icon } from "./components/icons/icon";
+export { Img } from "./components/images/img";
+export { Input } from "./components/form/inputs";
+export { Link } from "./components/link/link";
+export { List } from "./components/list/list";
+export { Modal } from "./components/modal/modal";
+export * from "./components/nav/nav";
+export { Popover } from "./components/popover/popover";
+export { RenderTable as TBL } from "./components/tables/table";
+export * from "./components/tag/tag";
+export * from "./components/tables/table-elements";
+export * from "./components/details/details";
+export * from "./components/text/text";
+export * from "./components/form/textarea";
+export * from "./components/nav/nav";
+export * from "./components/heading/heading";
+export * from "./components/breadcrumbs/breadcrumb";
+export * from "./components/text-to-speech/TextToSpeech";
+export { Dialog } from "./components/dialog/dialog";
+export { TextToSpeech } from "./components/text-to-speech/TextToSpeech";
 
-export { default as To } from './components/link/link'
-export { default as FP } from './components/fp'
-export { default as Box } from './components/fp'
+export { default as To } from "./components/link/link";
+export { default as FP } from "./components/fp";
+export { default as Box } from "./components/fp";
 
-export * from './components/ui'
+export * from "./components/ui";

package/src/patterns/page/page-header.stories.tsx

@@ -1,44 +1,40 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+// import { within, userEvent, screen } from "@storybook/test";
 
-
-import PageHeader, { HeaderVariants } from './page-header.js'
-import { Img } from '#components/images/img'
+import PageHeader, { HeaderVariants } from "./page-header.js";
+import { Img } from "#components/images/img";
 
 const meta: Meta<typeof PageHeader> = {
-  title: 'FP.React Patterns/PageHeader',
+  title: "FP.React Patterns/PageHeader",
   component: PageHeader,
+  tags: ["alpha"],
   args: {
-    headerTitle: 'Page Header',
-    headerSubtitle: 'Place your cool elevator pitch here...',
+    headerTitle: "Page Header",
+    headerSubtitle: "Place your cool elevator pitch here...",
     headerBackground: <Img src="https://picsum.photos/2400/600" alt="" />,
   },
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof PageHeader>
+export default meta;
+type Story = StoryObj<typeof PageHeader>;
 
 export const PageHeaderComponent: Story = {
   args: {},
-  name: 'Page Header',
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    //expect(canvas).toBeInTheDocument()
-  },
-}
+  name: "Page Header",
+};
 
 export const Cover: Story = {
   args: {
     ...PageHeaderComponent.args,
     variant: HeaderVariants.Cover,
   },
-  name: 'Cover Style',
-} as Story
+  name: "Cover Style",
+} as Story;
 
 export const Banner: Story = {
   args: {
     ...PageHeaderComponent.args,
     variant: HeaderVariants.Banner,
   },
-  name: 'Banner Style',
-} as Story
+  name: "Banner Style",
+} as Story;

package/src/sass/_globals.scss

@@ -1,7 +1,7 @@
 :root {
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
-    Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
+    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   --TRUE: initial;
   --FALSE: ;
   --fs-weight: 500;
@@ -23,7 +23,7 @@ body {
     flex-grow: 1;
   }
 
-  > a[href^='#'] {
+  > a[href^="#"] {
     position: absolute;
     top: -4rem;
     left: 0;
@@ -88,13 +88,13 @@ ol {
   gap: var(--li-gap, 0.2rem);
   flex-wrap: var(--li-wrap, nowrap);
   padding-inline-start: var(--li-ps, var(--spc-2));
-  &[role='list'],
-  &[data-list~='unstyled'] {
+  &[role="list"],
+  &[data-list~="unstyled"] {
     list-style: var(--li-style, none);
     margin-block-end: var(--li-my, 0);
     margin-block-start: var(--li-mx, 0);
   }
-  &[data-list~='inline'] {
+  &[data-list~="inline"] {
     --li-direction: row;
     --li-gap: 1rem;
     --li-wrap: wrap;
@@ -129,30 +129,6 @@ h6 {
   line-height: 1.2;
 }
 
-h1 {
-  font-size: var(--h1, var(--fs-6));
-}
-
-h2 {
-  font-size: var(--h2, var(--fs-5));
-}
-
-h3 {
-  font-size: var(--h3, var(--fs-4));
-}
-
-h4 {
-  font-size: var(--h4, var(--fs-3));
-}
-
-h5 {
-  font-size: var(--h5, var(--fs-2));
-}
-
-h6 {
-  font-size: var(--h6, var(--fs-1));
-}
-
 hr {
   --hr-h: 0.0625rem;
   --hr-color: lightgray;

package/src/sass/_styles.scss

@@ -1 +1,2 @@
-@use './styles/shadows';
+@use "./styles/shadows";
+@use "./styles/colors";

package/src/sass/styles/_colors.scss

@@ -0,0 +1,13 @@
+:root {
+  --transparent: transparent;
+}
+
+.transparent {
+  background-color: var(--transparent);
+  &-border {
+    border-color: var(--transparent);
+  }
+  &-color {
+    color: var(--transparent);
+  }
+}

package/src/styles/breadcrumbs/breadcrumb.css

@@ -5,7 +5,7 @@ nav[data-breadcrumb] {
   --breadcrumb-gap: 0.5rem;
   --breadcrumb-color: currentColor;
   --breadcrumb-current-color: rgb(46, 46, 46);
-  --breadcrumb-fs: var(--fs-0);
+  --breadcrumb-fs: var(--fs-3);
   margin-inline: unset;
   padding-inline: unset;
 }

package/src/styles/buttons/button.css

@@ -1,6 +1,7 @@
 button {
-  --btn-sm: calc(12rem / 16);
-  --btn-md: calc(16rem / 16);
+  --btn-xs: 0.6rem;
+  --btn-sm: 0.7rem;
+  --btn-md: 0.85rem;
   --btn-lg: calc(21rem / 16);
   --btn-pill: 100rem;
   --btn-height: 2.5rem;
@@ -27,6 +28,9 @@ button {
   background-color: var(--btn-bg, var(--btn));
   outline: none;
   width: var(--btn-width);
+  display: inline-flex;
+  align-items: center;
+  line-height: 0cap;
 }
 button[type] {
   background-color: var(--btn-bg, var(--neutral-300));
@@ -66,14 +70,33 @@ button[type=submit] {
 button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill] {
   border-radius: var(--btn-pill, 100rem);
 }
+button[data-btn~=xs] {
+  padding-inline: var(--btn-xs);
+  --btn-fs: var(--btn-xs);
+  --btn-height: 1.5rem;
+  text-transform: uppercase;
+}
 button[data-btn~=sm] {
   --btn-fs: var(--btn-sm);
+  --btn-height: 1.75rem;
 }
 button[data-btn~=md] {
   --btn-fs: var(--btn-md);
+  --btn-height: 2rem;
 }
 button[data-btn~=lg] {
   --btn-fs: var(--btn-lg);
+  --btn-height: 2.5rem;
+}
+button[data-btn~=icon] {
+  padding: unset;
+  height: unset;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 button[data-btn~=text] {
   --btn-bg: transparent;

package/src/styles/buttons/button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA","file":"button.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA","file":"button.css"}

package/src/styles/details/details.css

@@ -1,6 +1,6 @@
 details {
   --details-w: 100%;
-  --details-h: fit-content;
+  --details-h: max-content;
   --details-border: 1px solid #dfdfdf;
   --details-display: flex;
   --details-justify: flex-start;
@@ -10,13 +10,14 @@ details {
   --details-py: 1rem;
   --details-radius: 0.5rem;
   --summary-cursor: pointer;
-  --summary-transitions: all 0.75s linear;
+  --summary-transitions: all 0.75s ease-in-out;
   --summary-display: flex;
   --summary-justify: flex-start;
   --summary-align: center;
   --summary-gap: 0.5rem;
   --max-h-closed: 6.25rem;
   --max-h-open: 50rem;
+  interpolate-size: allow-keywords;
   display: var(--details-display);
   flex-direction: var(--details-direction);
   justify-content: var(--details-justify);
@@ -41,6 +42,7 @@ details summary {
   list-style: none;
   border-top-left-radius: var(--details-radius);
   border-top-right-radius: var(--details-radius);
+  transition: var(--summary-transitions);
   /* This ensures no bullet points are shown */
 }
 details summary::-webkit-details-marker {
@@ -64,7 +66,7 @@ details > section {
   border: 1px transparent solid;
 }
 details[open] {
-  max-height: var(--max-h-open);
+  max-height: max-content;
   transition: var(--summary-transitions);
 }
 details[open] > summary {

package/src/styles/details/details.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/details/details.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;;AAVA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE","file":"details.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/details/details.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;;AAVA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE","file":"details.css"}