@inc2734/unitone-css 0.47.2 → 0.48.0

package/src/layout-primitives/layers/README.md

@@ -1,307 +0,0 @@
-# Layers
-
-Elements on top of each other. Layers have a 12 x 7 (7 x 12 in portrait mode) grid, along which child layers can be shifted.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="layers">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-
-  <div data-unitone-layout="decorator" style="--unitone--align-self:end">
-    Lorem ipsum dolor sit amet
-  </div>
-</div>
-```
-
-### JSX
-
-```jsx
-import { Layers, Decorator } from '@inc2734/unitone-css';
-
-<Layers>
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-
-  <Decorator style={{ '--unitone--align-self': 'end' }}>
-    Lorem ipsum dolor sit amet
-  </Decorator>
-</Layers>
-```
-
-## Props
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers gap={1}>
-  ...
-</Layers>
-```
-
-### Min height
-
-Min height.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers" style="--unitone--min-height: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers minHeight="500px">
-  ...
-</Layers>
-```
-
-### Columns
-
-Number of columns.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers" style="--unitone--columns: 20">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers columns="20">
-  ...
-</Layers>
-```
-
-### Rows
-
-Number of rows.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers" style="--unitone--rows: 20">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers rows="20">
-  ...
-</Layers>
-```
-
-### Covered image
-
-Background image/video is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers -cover">
-  <img ...>
-
-  <div>
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers cover>
-  <img ... />
-
-  <div>
-    ...
-  </div>
-</Layers>
-```
-
-### Filled image
-
-The background image/video is enlarged according to the amount of content.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers -fill">
-  <img ...>
-
-  <div>
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers fill>
-  <img ... />
-
-  <div>
-    ...
-  </div>
-</Layers>
-```
-
-### Blur image
-
-Blur the background image/video.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers -blur" style="--unitone--blur: 100px">
-  <img ...>
-
-  <div>
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers blur style={{ '--unitone--blur': '100px' }}>
-  <img ... />
-
-  <div>
-    ...
-  </div>
-</Layers>
-```
-
-### Portrait grid
-
-In portrait mode, swaps the height and width of the grid.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers -portrait">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers portrait>
-  ...
-</Layers>
-```
-
-### Mix blend mode
-
-You can specify how the elements should look when stacked.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers -portrait">
-  <img ... />
-
-  <div style="--unitone--mix-blend-mode: overlay">
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers portrait>
-  <img ... />
-
-  <div style={{ '--unitone--mix-blend-mode': 'overlay' }}>
-    ...
-  </div>
-</Layers>
-```
-
-### Items position
-
-You can set the position of child elements with the associated properties of the CSS grid.
-
-#### HTML
-
-```html
-<div data-unitone-layout="layers">
-  <img ...>
-
-  <div style="--unitone--alilgn-self: end; --unitone--justify-self: center">
-    ...
-  </div>
-</div>
-
-<div data-unitone-layout="layers">
-  <img ...>
-
-  <div style="--unitone--grid-column: 1/-1; --unitone--grid-row: 1/-1">
-    ...
-  </div>
-</div>
-```
-
-```jsx
-import { Layers } from '@inc2734/unitone-css';
-
-<Layers>
-  <img ... />
-
-  <div style={{ '--unitone--alilgn-self': 'end', '--unitone--justify-self': 'center' }}>
-    ...
-  </div>
-</Layers>
-
-<Layers>
-  <img ... />
-
-  <div style={{ '--unitone--grid-column': '1/-1', '--unitone--grid-row': '1/-1' }}>
-    ...
-  </div>
-</Layers>
-```

package/src/layout-primitives/layers/stories/index.stories.jsx

@@ -1,187 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Layers } from '../';
-import { Decorator } from '../../decorator';
-
-export default {
-  title: 'Layout Primitives/Layers',
-  component: Layers,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    cover: {
-      control: { type: 'inline-radio' },
-      description:
-        "Background image/video is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.",
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    fill: {
-      control: { type: 'inline-radio' },
-      description: 'The background image/video is enlarged according to the amount of content.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    blur: {
-      control: { type: 'inline-radio' },
-      description: 'Blur the background image/video.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    portrait: {
-      control: { type: 'inline-radio' },
-      description: 'In portrait mode, swaps the height and width of the grid.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    gap: {
-      control: { type: 'inline-radio' },
-      description:
-        'Gap. Set by CSS var `--unitone--gap` or `data-unitone-layout` attribute `-gap:x`.',
-      options: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7],
-      table: { defaultValue: { summary: 'min(3.33333%,var(--unitone--grid-gap))' } },
-      type: { name: 'number', required: false },
-    },
-    minHeight: {
-      control: { type: 'text' },
-      description: 'Min height. Set by CSS var `--unitone--min-height`.',
-      table: { defaultValue: { summary: '0' } },
-      type: { name: 'string', required: false },
-    },
-    columns: {
-      control: { type: 'text' },
-      description: 'Number of columns. Set by CSS var `--unitone--columns`.',
-      table: { defaultValue: { summary: 'var(--unitone--grid-columns)' } },
-      type: { name: 'number', required: false },
-    },
-    rows: {
-      control: { type: 'text' },
-      description: 'Number of rows. Set by CSS var `--unitone--columns`.',
-      table: { defaultValue: { summary: 'var(--unitone--grid-rows)' } },
-      type: { name: 'number', required: false },
-    },
-  },
-  args: {
-    cover: false,
-    fill: false,
-    blur: false,
-    portrait: true,
-    gap: 'min(3.33333%,var(--unitone--grid-gap))',
-    minHeight: '0',
-    columns: 'var(--unitone--grid-columns)',
-    rows: 'var(--unitone--grid-rows)',
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Layers {...args}>
-      <img src="https://placehold.jp/600x400.jpg" alt="" />
-      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1} position="relative">
-        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-        irure dolor in reprehenderit in voluptate velit esse cillLorem ipsum dolor sit amet,
-        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-        irure dolor in reprehenderit in voluptate velit esse cill
-      </Decorator>
-    </Layers>
-  );
-};
-
-export const ExamplePicture = (args) => {
-  return (
-    <Layers {...args}>
-      <picture>
-        <img src="https://placehold.jp/600x400.jpg" alt="" />
-      </picture>
-      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1} position="relative">
-        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-        irure dolor in reprehenderit in voluptate velit esse cillLorem ipsum dolor sit amet,
-        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-        irure dolor in reprehenderit in voluptate velit esse cill
-      </Decorator>
-    </Layers>
-  );
-};
-ExamplePicture.storyName = 'Example : picture';
-
-export const ExampleFigure = (args) => {
-  return (
-    <Layers {...args}>
-      <figure>
-        <img src="https://placehold.jp/600x400.jpg" alt="" />
-      </figure>
-      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1} position="relative">
-        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-        irure dolor in reprehenderit in voluptate velit esse cillLorem ipsum dolor sit amet,
-        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-        irure dolor in reprehenderit in voluptate velit esse cill
-      </Decorator>
-    </Layers>
-  );
-};
-ExampleFigure.storyName = 'Example : figure';
-
-export const ExampleFigurePicture = (args) => {
-  return (
-    <Layers {...args}>
-      <figure>
-        <picture>
-          <img src="https://placehold.jp/600x400.jpg" alt="" />
-        </picture>
-      </figure>
-      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1} position="relative">
-        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-        irure dolor in reprehenderit in voluptate velit esse cillLorem ipsum dolor sit amet,
-        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-        irure dolor in reprehenderit in voluptate velit esse cill
-      </Decorator>
-    </Layers>
-  );
-};
-ExampleFigurePicture.storyName = 'Example : figure > picture';

package/src/layout-primitives/reel/README.md

@@ -1,115 +0,0 @@
-# Reel
-
-Displays child elements in a simple horizontal scroll.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="reel">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</div>
-```
-
-### JSX
-
-```jsx
-import { Reel } from '@inc2734/unitone-css';
-
-<Reel>
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</Reel>
-```
-
-## Props
-
-### No bar
-
-Hide bar.
-
-#### HTML
-
-```html
-<div data-unitone-layout="reel -no-bar">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Reel } from '@inc2734/unitone-css';
-
-<Reel noBar>
-  ...
-</Reel>
-```
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="reel -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Reel } from '@inc2734/unitone-css';
-
-<Reel gap={1}>
-  ...
-</Reel>
-```
-
-### Height
-
-Height.
-
-#### HTML
-
-```html
-<div data-unitone-layout="reel" style="--unitone--height: 250px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Reel } from '@inc2734/unitone-css';
-
-<Reel height="250px">
-  ...
-</Reel>
-```
-
-### Items width
-
-#### HTML
-
-```html
-<div data-unitone-layout="reel" style="--unitone--item-width: 250px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Reel } from '@inc2734/unitone-css';
-
-<Reel itemWidth="250px">
-  ...
-</Reel>
-```

package/src/layout-primitives/reel/stories/index.stories.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Reel } from '../';
-import { Decorator } from '../../decorator';
-import { Stack } from '../../stack';
-
-export default {
-  title: 'Layout Primitives/Reel',
-  component: Reel,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    gap: {
-      control: { type: 'inline-radio' },
-      description:
-        'Gap. Set by CSS var `--unitone--gap` or `data-unitone-layout` attribute `-gap:x`.',
-      options: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7],
-      table: { defaultValue: { summary: 'var(--unitone--global--gap)' } },
-      type: { name: 'number', required: false },
-    },
-    height: {
-      control: { type: 'text' },
-      description: 'Height. Set by CSS var `--unitone--height`.',
-      table: { defaultValue: { summary: 'auto' } },
-      type: { name: 'string', required: false },
-    },
-    itemWidth: {
-      control: { type: 'text' },
-      description: 'Each items width. Set by CSS var `--unitone--item-width`.',
-      table: { defaultValue: { summary: 'calc(var(--unitone--measure) / 2)' } },
-      type: { name: 'string', required: false },
-    },
-    noBar: {
-      control: { type: 'inline-radio' },
-      description: 'Remove scrollbar.',
-      options: [false, true],
-      table: { defaultValue: { summary: 'false' } },
-      type: { name: 'boolean', required: false },
-    },
-  },
-  args: {
-    gap: 2,
-    height: 'auto',
-    itemWidth: 'calc(var(--unitone--measure) / 2)',
-    noBar: false,
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Reel {...args}>
-      <Decorator backgroundColor="#eee" padding={1}>
-        <Stack>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>Lorem ipsum dolor sit amet</p>
-        </Stack>
-      </Decorator>
-      <Decorator backgroundColor="#eee" padding={1}>
-        <Stack>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>consectetur adipisicing elit</p>
-        </Stack>
-      </Decorator>
-      <Decorator backgroundColor="#eee" padding={1}>
-        <Stack>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
-        </Stack>
-      </Decorator>
-      <Decorator backgroundColor="#eee" padding={1}>
-        <Stack>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>Ut enim ad minim veniam</p>
-        </Stack>
-      </Decorator>
-    </Reel>
-  );
-};