jvetrau-ds 0.1.3 → 0.1.5

package/index.d.cts

@@ -214,4 +214,4 @@ interface AttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Attachment: React.FC<AttachmentProps>;
 
-export { Attachment, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };
+export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };

package/index.d.ts

@@ -214,4 +214,4 @@ interface AttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Attachment: React.FC<AttachmentProps>;
 
-export { Attachment, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };
+export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -198,75 +198,6 @@
   text-transform: uppercase;
 }
 
-/* src/components/button-icon/button-icon.css */
-.button-icon {
-  /* color */
-  --button-icon-bg: transparent;
-  --button-icon-color: var(--color-text);
-  --button-icon-bg-disabled: transparent;
-  --button-icon-color-disabled: var(--color-text-disabled);
-
-  background: var(--button-icon-bg);
-  color: var(--button-icon-color);
-
-  /* typography */
-
-  /* size */
-  --button-icon-size: 32px;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--button-icon-size);
-  height: var(--button-icon-size);
-  padding: 0;
-
-  /* border */
-  --button-icon-radius: var(--radius-control);
-  --button-icon-focus-width: var(--size-border-width-min);
-  --button-icon-focus-offset: 2px;
-
-  border: 0;
-  border-radius: var(--button-icon-radius);
-
-  /* depth */
-
-  /* motion */
-  --button-icon-transition-duration: var(--motion-duration1);
-  --button-icon-opacity-hover: 0.8;
-  --button-icon-opacity-active: 0.7;
-
-  cursor: pointer;
-  user-select: none;
-  transition: opacity var(--button-icon-transition-duration);
-}
-
-.button-icon__icon {
-  /* size */
-  flex-shrink: 0;
-}
-
-.button-icon:hover {
-  opacity: var(--button-icon-opacity-hover);
-}
-
-.button-icon:focus-visible {
-  outline: var(--button-icon-focus-width) solid currentColor;
-  outline-offset: var(--button-icon-focus-offset);
-}
-
-.button-icon:active {
-  opacity: var(--button-icon-opacity-active);
-}
-
-.button-icon:disabled,
-.button-icon--disabled {
-  background: var(--button-icon-bg-disabled);
-  color: var(--button-icon-color-disabled);
-  cursor: not-allowed;
-  opacity: 1;
-}
-
 /* src/components/button/button.css */
 .button {
   /* color */
@@ -373,6 +304,75 @@
   padding-inline: var(--button-padding-icon-only);
 }
 
+/* src/components/button-icon/button-icon.css */
+.button-icon {
+  /* color */
+  --button-icon-bg: transparent;
+  --button-icon-color: var(--color-text);
+  --button-icon-bg-disabled: transparent;
+  --button-icon-color-disabled: var(--color-text-disabled);
+
+  background: var(--button-icon-bg);
+  color: var(--button-icon-color);
+
+  /* typography */
+
+  /* size */
+  --button-icon-size: 32px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
+  padding: 0;
+
+  /* border */
+  --button-icon-radius: var(--radius-control);
+  --button-icon-focus-width: var(--size-border-width-min);
+  --button-icon-focus-offset: 2px;
+
+  border: 0;
+  border-radius: var(--button-icon-radius);
+
+  /* depth */
+
+  /* motion */
+  --button-icon-transition-duration: var(--motion-duration1);
+  --button-icon-opacity-hover: 0.8;
+  --button-icon-opacity-active: 0.7;
+
+  cursor: pointer;
+  user-select: none;
+  transition: opacity var(--button-icon-transition-duration);
+}
+
+.button-icon__icon {
+  /* size */
+  flex-shrink: 0;
+}
+
+.button-icon:hover {
+  opacity: var(--button-icon-opacity-hover);
+}
+
+.button-icon:focus-visible {
+  outline: var(--button-icon-focus-width) solid currentColor;
+  outline-offset: var(--button-icon-focus-offset);
+}
+
+.button-icon:active {
+  opacity: var(--button-icon-opacity-active);
+}
+
+.button-icon:disabled,
+.button-icon--disabled {
+  background: var(--button-icon-bg-disabled);
+  color: var(--button-icon-color-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
 /* src/components/card/card.css */
 .card {
   /* color */
@@ -2265,3 +2265,543 @@
   vertical-align: middle;
 }
 
+/* src/patterns/footer/footer.css */
+.footer {
+  /* color */
+  color: var(--color-text);
+  background: var(--color-bg);
+  border-top:
+    var(--border-size-width-min)
+    solid
+    var(--color-line);
+
+  /* typography */
+  font-family: var(--font-note-family);
+  font-size: var(--font-note);
+  font-weight: var(--font-note-weight);
+  line-height: var(--font-note-line);
+  letter-spacing: var(--font-note-letter-spacing);
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--margin-menu);
+
+  width: 100%;
+  min-height: 100px;
+  padding: var(--size-padding-container);
+
+  overflow: hidden;
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer__copyright {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  white-space: nowrap;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer__links {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  gap: var(--margin-menu);
+
+  flex-shrink: 0;
+
+  white-space: nowrap;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer__links > * {
+  display: flex;
+  align-items: center;
+}
+
+.footer a {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  text-decoration: underline;
+  text-underline-position: from-font;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+@media (max-width: 1024px) {
+  .footer {
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .footer__copyright,
+  .footer__links {
+    white-space: normal;
+  }
+
+  .footer__links {
+    flex-wrap: wrap;
+  }
+}
+
+/* src/patterns/header/header.css */
+.header {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  gap: var(--margin-menu);
+
+  width: 100%;
+  min-height: 80px;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.header__logo {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.header__menu {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 0;
+
+  flex: 1;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.header__avatar {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/patterns/screen-header/screen-header.css */
+.screen-header {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+
+  /* gap: var(--padding-container); */
+
+  width: 100%;
+
+  padding-bottom:
+    var(--padding-container);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__heading {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+
+/*  gap: var(--padding-tag);*/
+
+  margin-bottom: var(--font-h1-margin);
+
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__section {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-body-family);
+  font-size: var(--font-body);
+  font-weight: var(--font-body-weight);
+  line-height: var(--font-body-line);
+  letter-spacing: var(--font-body-letter-spacing);
+
+  /* size */
+  width: 100%;
+  margin: 0 0 var(--margin-descriptor) 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__title {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1);
+  font-weight: var(--font-h1-weight);
+  line-height: var(--font-h1-line);
+  letter-spacing: var(--font-h1-letter-spacing);
+
+  /* size */
+  width: 100%;
+  margin: 0 0 var(--font-h1-margin) 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__description {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-lead-family);
+  font-size: var(--font-lead);
+  font-weight: var(--font-lead-weight);
+  line-height: var(--font-lead-line);
+  letter-spacing: var(--font-lead-letter-spacing);
+
+  /* size */
+  width: 100%;
+  margin: 0;
+/*  max-width: 960px; */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__tabs {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/layouts/base/base.css */
+.layout-base__header {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-base__main {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-base__footer {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/layouts/foundation/foundation.css */
+.layout-foundation {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  --layout-foundation-width: 960px;
+  --layout-foundation-padding-horz: var(--size-grid-padding-horz);
+  --layout-foundation-padding-vert: var(--size-grid-padding-vert);
+  --layout-foundation-columns: 12;
+  --layout-foundation-gap: var(--size-grid-margin);
+
+  width: 100%;
+  min-height: 100dvh;
+  max-width: var(--layout-foundation-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-foundation--narrow {
+  --layout-foundation-width: 720px;
+}
+
+.layout-foundation--wide {
+  --layout-foundation-width: 1200px;
+}
+
+.layout-foundation--full {
+  max-width: none;
+}
+
+.layout-foundation__grid {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: grid;
+  grid-template-columns: repeat(var(--layout-foundation-columns), minmax(0, 1fr));
+  gap: var(--layout-foundation-gap);
+  width: 100%;
+  min-height: 100dvh;
+  padding:
+    var(--layout-foundation-padding-vert)
+    var(--layout-foundation-padding-horz);
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-foundation__grid > * {
+  grid-column: 1 / -1;
+}
+
+@media (max-width: 1024px) {
+  .layout-foundation {
+    --layout-foundation-columns: 8;
+  }
+}
+
+@media (max-width: 640px) {
+  .layout-foundation {
+    --layout-foundation-columns: 4;
+  }
+}
+
+/* src/layouts/sidebar/sidebar.css */
+.layout-sidebar__header {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: grid;
+  grid-template-columns: repeat(var(--layout-foundation-columns), minmax(0, 1fr));
+  gap: var(--layout-foundation-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__main {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: span 8;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__side {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: span 4;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__footer {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+@media (max-width: 1024px) {
+  .layout-sidebar__main,
+  .layout-sidebar__side {
+    grid-column: 1 / -1;
+  }
+}
+