@fpkit/acss 0.4.4

package/src/components/styles/index.css

@@ -0,0 +1,520 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+::selection {
+  /* Optional */
+  /* It can be really hard to read highlighted text with a text-shadow, it should be removed when selected */
+  text-shadow: none;
+  /* NOTE: Using this means the color and background-color are set to transparent for selected text... */
+  /* So you can customise your styles below */
+  color: #fff;
+  background-color: #00f;
+}
+
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+  height: 100%;
+  font-size: 100%;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-inline-start: 0;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+/* Make images easier to work with */
+img,
+picture,
+video,
+canvas {
+  display: block;
+  max-width: 100%;
+  aspect-ratio: auto;
+}
+
+img,
+video,
+iframe {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  font-style: italic;
+  background-repeat: no-repeat;
+  background-size: cover;
+  shape-margin: 0.75rem;
+}
+
+svg {
+  display: inline-block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  font-variant: inherit;
+  line-height: inherit;
+  background-color: inherit;
+}
+
+/* Inherit fonts for inputs and buttons */
+:where(button) {
+  font-family: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* Create a root stacking context */
+#root,
+#__next {
+  isolation: isolate;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+*:focus {
+  outline: none;
+}
+
+/* Removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+svg {
+  max-width: inline-size;
+  /* Optional - make the SVG's fill be the same as the inherited color */
+  /* Prevent the SVG from altering cursor interaction */
+  pointer-events: none;
+}
+svg[role='img'] {
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+}
+
+:root {
+  --font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --fs: 1rem;
+}
+
+html {
+  font-family: var(--font-family);
+  font-size: var(--fs);
+}
+
+main,
+header,
+footer {
+  font-size: var(--fs);
+}
+main > section,
+header > section,
+footer > section {
+  margin-inline: auto;
+  width: var(--content-w, 80%);
+}
+main > div,
+header > div,
+footer > div {
+  text-align: center;
+}
+
+section:not(nav) {
+  margin-inline: var(--sect-y, auto);
+  padding-block: var(--sect-x, --spc-4);
+}
+
+p {
+  font-size: var(--fs);
+}
+p + p {
+  margin-block-start: 1rem;
+}
+
+button {
+  --btn-sm: calc(12rem / 16);
+  --btn-md: calc(16rem / 16);
+  --btn-lg: calc(21rem / 16);
+  --btn-pill: 100rem;
+  --btn-height: calc(40rem / 16);
+  --fs: 0.95rem;
+  --btn-fs: calc(15rem / 16);
+  --btn-bg: lightgray;
+  --btn-width: max-content;
+  font-size: var(--btn-fs);
+  font-weight: var(--btn-fw, 500);
+  height: var(--btn-height, 2.5rem);
+  min-height: var(--btn-height);
+  place-items: var(--btn-place, center);
+  padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
+  padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));
+  border: var(--btn-bdr, none);
+  border-radius: var(--btn-rds, 0.375rem);
+  text-decoration: var(--btn-deco, none);
+  color: var(--btn-cl, currentColor);
+  display: var(--btn-dsp, inline-flex);
+  gap: var(--btn-gap, 0.2rem);
+  white-space: var(--btn-wspc, inherit);
+  margin: var(--btn-spc, 0);
+  transition: var(--tran-all);
+  background-color: var(--btn-bg, var(--btn));
+  outline: none;
+  width: var(--btn-width);
+}
+button[type] {
+  background-color: var(--btn-bg, var(--neutral-300));
+  --btn-bdr: solid var(--btn-sg);
+}
+button[type='submit'],
+button[style*='submit'] {
+  --btn-bg: var(--primary-500, royal-blue);
+  --btn-color: white;
+}
+button[disabled],
+button[aria-disabled='true'] {
+  cursor: var(--btn-cursor, not-allowed);
+  opacity: var(--btn-opacity, 0.5);
+}
+button[disabled]:is(:hover, :focus),
+button[aria-disabled='true']:is(:hover, :focus) {
+  transform: none;
+  opacity: var(--btn-opacity, 0.5);
+}
+button:is(:hover, :focus) {
+  --btn-cl: var(--btn-cl-hover);
+  background-color: var(--btn-bg, var(--btn, lightgray));
+  filter: invert(1) hue-rotate 180deg;
+  transform: scale(0.95);
+  outline-offset: var(--line-offset, 5px);
+}
+button:is(:hover, :focus)[aria-disabled='true'] {
+  transform: none;
+  opacity: var(--btn-opacity, 0.5);
+}
+button[type='reset'] {
+  --btn-bg: transparent;
+  --btn-color: gray;
+  --btn-bdr: gray thin solid;
+}
+button[type='submit'] {
+  --btn-bg: var(--primary-700, blue);
+  --btn-cl: #fff;
+  --btn-color: rgb(231, 231, 231);
+  --btn-border: none;
+}
+button[data-fp-btn~='pill'],
+button[data-btn~='pill'],
+button[data-style~='pill'] {
+  border-radius: var(--btn-pill, 100rem);
+}
+button[data-btn~='sm'] {
+  --btn-fs: var(--btn-sm);
+}
+button[data-btn~='md'] {
+  --btn-fs: var(--btn-md);
+}
+button[data-btn~='lg'] {
+  --btn-fs: var(--btn-lg);
+}
+
+p[role='note'],
+[role='note'],
+[data-badge] {
+  --beta: var(--warning-500, orange);
+  --stable: var(--success-500, green);
+  --production: rgb(44, 71, 151);
+  --badge-px: 0.7rem;
+  --badge-py: 0.2rem;
+  --badge-fs: 0.8rem;
+  --badge-radius: 99rem;
+  --badge-bg: lightgray;
+  --badge-fw: 500;
+  --badge-color: currentColor;
+  --badge-display: inline-block;
+  display: var(--badge-display);
+  padding-inline: var(--badge-px);
+  padding-block: var(--badge-py);
+  color: var(--badge-color);
+  background-color: var(--badge-bg);
+  border-radius: var(--badge-radius);
+}
+p[role='note'][data-badge~='beta'],
+[role='note'][data-badge~='beta'],
+[data-badge][data-badge~='beta'] {
+  background-color: var(--beta);
+}
+p[role='note'][data-badge~='stable'],
+[role='note'][data-badge~='stable'],
+[data-badge][data-badge~='stable'] {
+  --badge-cl: white;
+  --badge-bg: var(--stable);
+}
+p[role='note'][data-badge~='production'],
+[role='note'][data-badge~='production'],
+[data-badge][data-badge~='production'] {
+  --badge-color: white;
+  --badge-bg: var(--production);
+}
+p[role='note'][data-badge~='beta'],
+[role='note'][data-badge~='beta'],
+[data-badge][data-badge~='beta'] {
+  --badge-color: currentColor;
+  --badge-bg: var(--beta);
+}
+p[role='note'][data-badge~='alpha'],
+[role='note'][data-badge~='alpha'],
+[data-badge][data-badge~='alpha'] {
+  --badge-color: currentColor;
+  --badge-bg: var(--beta);
+}
+p[role='note'][data-badge~='beta'],
+[role='note'][data-badge~='beta'],
+[data-badge][data-badge~='beta'] {
+  --badge-color: currentColor;
+  --badge-bg: var(--beta);
+}
+
+p[role='note'] {
+  --badge-display: block;
+  --border-radius: 0.5rem;
+}
+
+[data-card],
+[data-component~='card'] {
+  --card-p: 2rem;
+  --card-bg: #fff;
+  --card-radius: calc(var(--card-p) / 3);
+  --card-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+  --card-position: relative;
+  --card-display: flex;
+  --card-direction: column;
+  --card-gap: 1rem;
+  position: relative;
+  display: var(--card-display);
+  padding: var(--card-p);
+  display: var(--card-display);
+  flex-direction: var(--card-direction);
+  gap: var(--card-gap);
+  box-shadow: var(--card-shadow);
+  border-radius: var(--card-radius);
+}
+
+details {
+  --details-display: 'flex';
+  --details-flex-direction: 'column';
+  --details-align-items: 'flex-start';
+  --details-margin: '0';
+  --details-width: '100%';
+  --details-padding-x: '0';
+  --details-padding-y: '1.5rem';
+  display: var(--details-display);
+  flex-direction: var(--details-flex-direction);
+  align-items: var(--details-align-items);
+  margin: var(--details-margin);
+  width: var(--details-width);
+  padding-inline: var(--details-padding-x);
+  padding-block: var(--details-padding-y);
+}
+details > summary {
+  width: var(--details-width);
+  display: var(--details-display);
+}
+details > div {
+  padding: var(--details-padding-y);
+}
+
+progress {
+  /* Revert all styles */
+  all: revert;
+  --progress-w: 100%;
+  --progress-h: 1rem;
+  --progress-bg: #cccccc;
+  --progress-color: rgb(71, 71, 245);
+  --progress-accent-color: var(--progress-color);
+  /* This code changes the color of the progress bar. */
+  /* The variable names indicate the colors that are used. */
+  /* The colors are used in the progress bar. */
+  /* If the progress element is busy, remove the revert styles */
+}
+progress[value] {
+  width: var(--progress-w);
+  height: var(--progress-h);
+  background-color: var(--progress-bg);
+  accent-color: var(--progress-accent-color);
+  /* Styling for the remaining part of the& bar */
+}
+progress[value]::-webkit-progress-value {
+  /* Color for Chrome, Safari, and newer Opera */
+  background-color: var(--progress-accent-color);
+  accent-color: var(--progress-accent-color);
+}
+progress[value]::-moz-progress-bar {
+  /* Color for Firefox */
+  background-color: var(--progress-accent-color);
+  accent-color: var(--progress-accent-color);
+}
+progress[value]::-webkit-progress-bar {
+  /* Background for Chrome, Safari, and newer Opera */
+  background-color: var(--progress-background-color);
+  accent-color: var(--progress-accent-color);
+}
+progress[aria-busy] {
+  width: var(--progress-w);
+  height: var(--progress-h);
+  accent-color: var(--progress-accent-color);
+  /* Styling for the remaining part of the& bar */
+}
+progress[aria-busy]::-webkit-progress-value {
+  /* Color for Chrome, Safari, and newer Opera */
+  accent-color: var(--progress-accent-color);
+}
+progress[aria-busy]::-moz-progress-bar {
+  accent-color: var(--progress-accent-color);
+}
+progress[aria-busy]::-webkit-progress-bar {
+  /* Background for Chrome, Safari, and newer Opera */
+  accent-color: var(--progress-accent-color);
+}
+
+details {
+  --details-w: 100%;
+  --details-h: fit-content;
+  --details-border: 1px solid #dfdfdf;
+  --details-display: flex;
+  --details-justify: flex-start;
+  --details-direction: columns;
+  --details-gap: 5rem;
+  --details-px: 2rem;
+  --details-py: 1.5rem;
+  --details-radius: 0.5rem;
+  --summary-cursor: pointer;
+  --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: 200px;
+  --max-h-open: 50rem;
+  display: var(--details-display);
+  flex-direction: var(--details-direction);
+  justify-content: var(--details-justify);
+  gap: var(--details-gap);
+  width: var(--details-w);
+  border: var(--details-border);
+  transition: var(--summary-transitions);
+  max-height: var(--max-h-closed);
+  overflow: clip;
+  border-radius: var(--details-radius);
+}
+details::marker {
+  content: none;
+}
+details summary {
+  display: var(--summary-display);
+  justify-content: var(--summary-justify);
+  align-items: var(--summary-align);
+  padding-inline: var(--summary-px, var(--details-px));
+  padding-block: var(--summary-py, var(--details-py));
+  gap: var(--summary-gap);
+}
+details summary:hover {
+  cursor: var(--summary-cursor);
+}
+details summary > section {
+  width: var(--details-w);
+}
+details > section {
+  padding-inline: var(--details-px);
+  padding-block: var(--details-py);
+  border: 1px transparent solid;
+}
+details[open] {
+  max-height: var(--max-h-open);
+  transition: var(--summary-transitions);
+}
+details[open] > summary {
+  border-bottom: var(--details-border);
+}
+details[open] > section {
+  max-height: var(--max-h-open);
+}
+
+/*# sourceMappingURL=index.css.map */

package/src/components/styles/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../sass/_reset.scss","../../sass/_globals.scss","../buttons/button.scss","../badge/badge.scss","../cards/card.scss","../dropdowns/dropdown.scss","../progress/progress.scss","../details/details.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AACE;AACA;EACA;AAEA;AACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;AAAA;EAEE;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AAGE;AAAA;EACE;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;IACE;;EAGF;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AAIJ;AACA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;AAEA;AAGA;EACA;;AAEA;EACE;EACA;EACA;;;AC/KJ;EACE;AAAA;AAAA;EAGA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;AACA;AAAA;AAAA;EACE;EACA;;AAEF;AAAA;AAAA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;;AACA;EACE;;;ACjCJ;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;EACA;;AAEA;EACE;EAEA;;AAKJ;EAEE;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AClGJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAEF;AAAA;AAAA;EACE;EACA;;;AAGJ;EACE;EACA;;;ACpDF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;ACvBJ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AACA;AACA;AA8BA;;AA7BA;EAEE;EACA;EACA;EACA;AAgBA;;AAbA;AACE;EACA;EACA;;AAIF;AACE;EACA;EACA;;AAIF;AACE;EACA;EACA;;AAKJ;EAEE;EACA;EAEA;AAcA;;AAZA;AACE;EAEA;;AAGF;EAGE;;AAIF;AACE;EAEA;;;ACjEN;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;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE","file":"index.css"}

package/src/components/tables/table-elements.tsx

@@ -0,0 +1,57 @@
+import FP from '../fp'
+import { ComponentProps } from '../../types'
+import React from 'react'
+
+
+export const Caption = ({ children, ...props }: ComponentProps) => {
+  return (
+    <FP as="caption" {...props}>
+      {children}
+    </FP>
+  )
+}
+
+export const Thead = ({ children, ...props }: ComponentProps) => (
+  <FP as="thead" {...props}>
+    {children}
+  </FP>
+)
+
+export const Tbody = ({ children, ...props }: ComponentProps) => (
+  <FP as="tbody" {...props}>
+    {children}
+  </FP>
+)
+
+export const Tr = ({ children, ...props }: ComponentProps) => (
+  <FP as="tr" {...props}>
+    {children}
+  </FP>
+)
+
+export const Td = ({ children, ...props }: ComponentProps) => (
+  <FP as="td" {...props}>
+    {children}
+  </FP>
+)
+
+export const Table = ({ id, dataStyle, children, ...props }: ComponentProps) => {
+  return (
+    <FP
+      as="section"
+      id={id}
+      {...props}
+      data-style="table-wrapper"
+    >
+      <table>{children}</table>
+    </FP>
+  )
+}
+
+Table.displayName = 'Table'
+Caption.displayName = 'Caption'
+Thead.displayName = 'Thead'
+Tbody.displayName = 'Tbody'
+Tr.displayName = 'Tr'
+Td.displayName = 'Td'
+

package/src/components/tables/table.tsx

@@ -0,0 +1,57 @@
+import { Table, Caption, Thead, Tbody, Td, Tr } from './table-elements'
+import { ComponentProps } from '../../types'
+
+import React from 'react'
+
+export interface TableProps extends ComponentProps {
+  tblHead: React.ReactNode
+  tblBody: React.ReactNode
+  tblCaption?: React.ReactNode
+}
+
+export type dataType = { id: number; items: string[] }[]
+
+/**
+ * Render the `thead` by passing an array of names
+ */
+export const RenderHead = (data: []) => {
+  const head = data.map((item, index) => {
+    return <th key={index}>{item}</th>
+  })
+  return <tr>{head}</tr>
+}
+
+/**
+ * Render the table body `tr`, `td` with the data provided
+ */
+export const RenderBody = (data: {}[]) => {
+  const rec = data.map((item, index) => {
+    return (
+      <tr key={index}>
+        {/* <td>{item?.id}</td>
+        <td>{item?.items}</td> */}
+      </tr>
+    )
+  })
+  return <Tbody>{rec}</Tbody>
+}
+
+/**
+ * Render the table placing `caption`, `thead` and `tbody` in the correct order
+ * caption is optional
+ */
+export const RenderTable = ({ tblBody, tblCaption, tblHead }: TableProps) => {
+  return (
+    <Table>
+      {tblCaption && <Caption>{tblCaption}</Caption>}
+      <Thead>
+        <Tr>{tblHead}</Tr>
+      </Thead>
+      <Tbody>{tblBody}</Tbody>
+    </Table>
+  )
+}
+
+RenderTable.displayName = 'TBL'
+RenderBody.displayName = 'renderBody'
+RenderHead.displayName = 'renderHead'

package/src/components/tag/tag.scss

@@ -0,0 +1,56 @@
+p[role='note'],
+[role='note'],
+small > span,
+[data-tag] {
+  --beta: var(--warning-500, orange);
+  --stable: var(--success-500, green);
+  --production: rgb(44, 71, 151);
+  --tag-px: 0.7rem;
+  --tag-py: 0.2rem;
+  --tag-fs: 0.8rem;
+  --tag-radius: 99rem;
+  --tag-bg: lightgray;
+  --tag-fw: 500;
+  --tag-color: currentColor;
+  --tag-display: inline-block;
+
+  display: var(--tag-display);
+  padding-inline: var(--tag-px);
+  padding-block: var(--tag-py);
+  font-size: var(--tag-fs);
+  color: var(--tag-color);
+  background-color: var(--tag-bg);
+  border-radius: var(--tag-radius);
+
+  &[data-tag~='beta'] {
+    background-color: var(--beta);
+  }
+
+  &[data-tag~='stable'] {
+    --tag-cl: white;
+    --tag-bg: var(--stable);
+  }
+
+  &[data-tag~='production'] {
+    --tag-color: white;
+    --tag-bg: var(--production);
+  }
+
+  &[data-tag~='beta'] {
+    --tag-color: currentColor;
+    --tag-bg: var(--beta);
+  }
+
+  &[data-tag~='alpha'] {
+    --tag-color: currentColor;
+    --tag-bg: var(--beta);
+  }
+  &[data-tag~='beta'] {
+    --tag-color: currentColor;
+    --tag-bg: var(--beta);
+  }
+}
+p[role='note'] {
+  --tag-display: block;
+  --border-radius: 0.5rem;
+}