@inc2734/unitone-css 0.47.2 → 0.48.0

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

@@ -1,198 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Decorator } from '../';
-import { Stack } from '../../stack';
-
-export default {
-  title: 'Layout Primitives/Decorator',
-  component: Decorator,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    backgroundColor: {
-      control: { type: 'color' },
-      description: 'Background color. Set by CSS var `--unitone--background-color`.',
-      table: { defaultValue: { summary: 'transparent' } },
-      type: { name: 'string', required: false },
-    },
-    borderColor: {
-      control: { type: 'color' },
-      description: 'Border color. Set by CSS var `--unitone--border-color`.',
-      table: { defaultValue: { summary: 'transparent' } },
-      type: { name: 'string', required: false },
-    },
-    borderRadius: {
-      control: { type: 'text' },
-      description: 'Border radius. Set by CSS var `--unitone--border-radius`.',
-      table: { defaultValue: { summary: '0' } },
-      type: { name: 'string', required: false },
-    },
-    borderWidth: {
-      control: { type: 'text' },
-      description: 'Border width. Set by CSS var `--unitone--border-width`.',
-      table: { defaultValue: { summary: '0' } },
-      type: { name: 'string', required: false },
-    },
-    color: {
-      control: { type: 'color' },
-      description: 'Text color. Set by CSS var `--unitone--color`.',
-      table: { defaultValue: { summary: 'inherit' } },
-      type: { name: 'string', required: false },
-    },
-    padding: {
-      control: { type: 'inline-radio' },
-      description:
-        'Padding. Set by CSS var `--unitone--padding` or `data-unitone-layout` attribute `-padding:x`.',
-      options: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7],
-      table: { defaultValue: { summary: '0px' } },
-      type: { name: 'number', required: false },
-    },
-    shadow: {
-      control: { type: 'inline-radio' },
-      description: 'With `box-shadow`.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    position: {
-      control: { type: 'inline-radio' },
-      description: 'The position value.',
-      options: ['static', 'relative', 'absolute', 'sticky', 'fixed'],
-      table: { defaultValue: { summary: 'static' } },
-      type: { name: 'string', required: false },
-    },
-    top: {
-      control: { type: 'text' },
-      description: 'Offset top.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    right: {
-      control: { type: 'text' },
-      description: 'Offset right.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    bottom: {
-      control: { type: 'text' },
-      description: 'Offset bottom.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    left: {
-      control: { type: 'text' },
-      description: 'Offset left.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    zIndex: {
-      control: { type: 'text' },
-      description: 'z-index.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    overflow: {
-      control: { type: 'inline-radio' },
-      description: 'The overflow value.',
-      options: ['visible', 'hidden', 'scroll'],
-      table: { defaultValue: { summary: 'visible' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    backgroundColor: 'transarent',
-    borderColor: 'transparent',
-    borderRadius: '0px',
-    borderWidth: '0px',
-    color: 'initial',
-    padding: 0,
-    shadow: false,
-    position: 'static',
-    top: 'initial',
-    right: 'initial',
-    bottom: 'initial',
-    left: 'initial',
-    zIndex: 'initial',
-    overflow: 'visible',
-  },
-};
-
-const content =
-  '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 cill';
-
-export const Default = (args) => {
-  return (
-    <Decorator {...args}>
-      <p>{content}</p>
-    </Decorator>
-  );
-};
-
-export const ExampleShadow = (args) => {
-  return (
-    <Decorator {...args}>
-      <p>{content}</p>
-    </Decorator>
-  );
-};
-ExampleShadow.storyName = 'Example : Shadow';
-ExampleShadow.argTypes = {
-  shadow: { table: { disable: true } },
-};
-ExampleShadow.args = {
-  padding: 1,
-  shadow: true,
-};
-
-export const ExampleCombobox = (args) => {
-  return (
-    <Decorator borderWidth={args.borderWidth} borderColor={args.backgroundColor}>
-      <Decorator
-        padding={args.padding}
-        backgroundColor={args.backgroundColor}
-        color="var(--unitone--color--white)"
-      >
-        Combo Box
-      </Decorator>
-      <Decorator padding={args.padding}>
-        <p>{content}</p>
-      </Decorator>
-    </Decorator>
-  );
-};
-ExampleCombobox.storyName = 'Example : Combobox';
-ExampleCombobox.argTypes = {
-  color: { table: { disable: true } },
-  borderColor: { table: { disable: true } },
-};
-ExampleCombobox.args = {
-  padding: -1,
-  backgroundColor: '#000',
-  borderWidth: '1px',
-};
-
-export const ExamplePosition = (args) => {
-  return (
-    <Decorator position="relative">
-      <Stack>
-        <Decorator backgroundColor="#000" color="#fff" padding={1}>
-          {content}
-        </Decorator>
-        <Decorator {...args}>{content}</Decorator>
-        <Decorator backgroundColor="#000" color="#fff" padding={1}>
-          {content}
-        </Decorator>
-      </Stack>
-    </Decorator>
-  );
-};
-ExamplePosition.storyName = 'Example : Position';
-ExamplePosition.args = {
-  padding: -1,
-  borderWidth: '1px',
-  backgroundColor: 'rgba(255, 0, 0, .7)',
-  position: 'absolute',
-  top: '100px',
-};

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

@@ -1,115 +0,0 @@
-# Float
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="float">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</div>
-<p>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 cill</p>
-```
-
-### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float>
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</Float>
-<p>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 cill</p>
-```
-
-## Props
-
-### Position
-
-Change floating position.
-
-left / right
-
-#### HTML
-
-```html
-<div data-unitone-layout="float -right">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float position="right">
-  ...
-</Float>
-```
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="float -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float gap={1}>
-  ...
-</Float>
-```
-
-### Min width
-
-Min width of the floating item.
-
-#### HTML
-
-```html
-<div data-unitone-layout="float" style="--unitone--min-width: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float minWidth="500px">
-  ...
-</Float>
-```
-
-### Min measure.
-
-Min width of the item following the floating item.
-
-#### HTML
-
-```html
-<div data-unitone-layout="float" style="--unitone--min-measure: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float minMeasure="500px">
-  ...
-</Float>
-```

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

@@ -1,78 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Float } from '../';
-
-export default {
-  title: 'Layout Primitives/Float',
-  component: Float,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    gap: {
-      control: { type: 'inline-radio' },
-      description:
-        'Gap between items. 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 },
-    },
-    minMeasure: {
-      control: { type: 'text' },
-      description:
-        'Min width of the item following the floating item. Set by CSS var `--unitone--min-measure`.',
-      table: { defaultValue: { summary: 'calc(var(--unitone--measure) / 2)' } },
-      type: { name: 'string', required: false },
-    },
-    minWidth: {
-      control: { type: 'text' },
-      description: 'Min width of the floating item. Set by CSS var `--unitone--min-width`.',
-      table: { defaultValue: { summary: 'calc(var(--unitone--measure) / 2)' } },
-      type: { name: 'string', required: false },
-    },
-    position: {
-      control: { type: 'inline-radio' },
-      description:
-        'The floating item position. Set by `data-unitone-layout` attribute `-right` or `-left`.',
-      options: ['left', 'right'],
-      table: { defaultValue: { summary: 'left' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    gap: 2,
-    minMeasure: 'calc(var(--unitone--measure) / 2)',
-    minWidth: 'calc(var(--unitone--measure) / 2)',
-    position: 'left',
-  },
-};
-
-const content =
-  '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 cill';
-
-export const Default = (args) => {
-  return (
-    <>
-      <Float {...args}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-      </Float>
-      <p>{content}</p>
-    </>
-  );
-};
-
-export const ExampleRight = (args) => {
-  return (
-    <>
-      <Float {...args}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-      </Float>
-      <p>{content}</p>
-    </>
-  );
-};
-ExampleRight.storyName = 'Example : Right';
-ExampleRight.args = {
-  position: 'right',
-};

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

@@ -1,67 +0,0 @@
-# Frame
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="frame">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</div>
-```
-
-### JSX
-
-```jsx
-import { Frame } from '@inc2734/unitone-css';
-
-<Frame>
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</Frame>
-```
-
-## Props
-
-### Ratio
-
-Aspect ratio.
-
-#### HTML
-
-```html
-<div data-unitone-layout="frame" style="--unitone--aspect-ratio: 16/9">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Frame } from '@inc2734/unitone-css';
-
-<Frame aspectRatio="16/9">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</Frame>
-```
-
-### Switch
-
-Switch aspect ratio when portrait.
-
-#### HTML
-
-```html
-<div data-unitone-layout="frame -switch">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Frame } from '@inc2734/unitone-css';
-
-<Frame switch>
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</Frame>
-```

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Frame } from '../';
-
-export default {
-  title: 'Layout Primitives/Frame',
-  component: Frame,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    ratio: {
-      control: { type: 'text' },
-      description: 'Aspect ratio. Set by CSS var `--unitone--ratio`.',
-      table: { defaultValue: { summary: '16/9' } },
-      type: { name: 'string', required: false },
-    },
-    switchRatio: {
-      control: { type: 'inline-radio' },
-      description: 'When the orientation switches, the `--unitone--ratio` also switches.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-  },
-  args: {
-    ratio: '16/9',
-    switchRatio: false,
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Frame {...args}>
-      <img src="https://placehold.jp/400x300.jpg" alt="" />
-    </Frame>
-  );
-};
-
-export const Switch = (args) => {
-  return (
-    <Frame {...args}>
-      <img src="https://placehold.jp/400x300.jpg" alt="" />
-    </Frame>
-  );
-};
-Switch.args = {
-  switchRatio: true,
-};

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

@@ -1,47 +0,0 @@
-# Gutters
-
-Separate content with top and bottom padding.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="gutters">
-  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 cill
-</div>
-```
-
-### JSX
-
-```jsx
-import { Gutters } from '@inc2734/unitone-css';
-
-<Gutters>
-  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 cill
-</Gutters>
-```
-
-## Props
-
-### Padding
-
-Top and bottom padding.
-
-#### HTML
-
-```html
-<div data-unitone-layout="section -padding:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Gutters } from '@inc2734/unitone-css';
-
-<Gutters padding={1}>
-  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 cill
-</Gutters>
-```

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Gutters } from '../';
-import { Center } from '../../center';
-import { Container } from '../../container';
-import { Stack } from '../../stack';
-
-export default {
-  title: 'Layout Primitives/Gutters',
-  component: Gutters,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    padding: {
-      control: { type: 'inline-radio' },
-      description:
-        'Top and bottom padding. Set by CSS var `--unitone--padding` or `data-unitone-layout` attribute `-padding:x`.',
-      options: [1, 2, 3, 4, 5, 6, 7],
-      table: { defaultValue: { summary: 'var(--unitone--s4)' } },
-      type: { name: 'number', required: false },
-    },
-  },
-  args: {
-    padding: 4,
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Gutters {...args}>
-      <Container>
-        <Stack gap={3}>
-          <Center>
-            <h2 style={{ '--unitone--font-size': 2 }}>Lorem ipsum dolor sit amet</h2>
-          </Center>
-          <p>
-            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 cill
-          </p>
-        </Stack>
-      </Container>
-    </Gutters>
-  );
-};