@kalink-ui/seedly 0.8.1 → 0.10.0

package/src/styles/define-responsive-properties.ts

@@ -0,0 +1,242 @@
+import {
+  type ConditionalValue,
+  defineProperties,
+} from '@vanilla-extract/sprinkles';
+
+import { utilities } from './layers.css';
+import { sys } from './system-contract.css';
+
+interface ScreenMediaQueries {
+  sm: `screen and (min-width: ${string}px)`;
+  md: `screen and (min-width: ${string}px)`;
+  lg: `screen and (min-width: ${string}px)`;
+  xl: `screen and (min-width: ${string}px)`;
+}
+
+interface DefineResponsivePropertiesArgs {
+  screen: ScreenMediaQueries;
+}
+
+export const defineResponsiveProperties = ({
+  screen,
+}: DefineResponsivePropertiesArgs) =>
+  defineProperties({
+    '@layer': utilities,
+
+    conditions: {
+      xs: {},
+      sm: { '@media': screen.sm },
+      md: { '@media': screen.md },
+      lg: { '@media': screen.lg },
+      xl: { '@media': screen.xl },
+    },
+
+    defaultCondition: 'xs',
+    responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl'],
+
+    properties: {
+      display: [
+        'none',
+        'block',
+        'inline',
+        'inline-block',
+        'flex',
+        'inline-flex',
+        'grid',
+        'list-item',
+      ],
+      paddingBlockStart: sys.spacing,
+      paddingBlockEnd: sys.spacing,
+      paddingInlineStart: sys.spacing,
+      paddingInlineEnd: sys.spacing,
+
+      marginBlockStart: sys.spacing,
+      marginBlockEnd: sys.spacing,
+      marginInlineStart: sys.spacing,
+      marginInlineEnd: sys.spacing,
+
+      columnGap: sys.spacing,
+      rowGap: sys.spacing,
+
+      flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
+
+      justifyContent: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+      ],
+      alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+      alignSelf: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+
+      position: [
+        'absolute',
+        'relative',
+        'fixed',
+        'sticky',
+        'static',
+        'inherit',
+      ],
+      insetBlockStart: sys.spacing,
+      insetBlockEnd: sys.spacing,
+      insetInlineStart: sys.spacing,
+      insetInlineEnd: sys.spacing,
+
+      textAlign: ['start', 'end', 'center', 'justify'],
+    },
+
+    shorthands: {
+      padding: [
+        'paddingBlockStart',
+        'paddingInlineEnd',
+        'paddingBlockEnd',
+        'paddingInlineStart',
+      ],
+      paddingBlock: ['paddingBlockStart', 'paddingBlockEnd'],
+      paddingInline: ['paddingInlineEnd', 'paddingInlineStart'],
+
+      margin: [
+        'marginBlockStart',
+        'marginInlineEnd',
+        'marginBlockEnd',
+        'marginInlineStart',
+      ],
+      marginBlock: ['marginBlockStart', 'marginBlockEnd'],
+      marginInline: ['marginInlineEnd', 'marginInlineStart'],
+
+      gap: ['rowGap', 'columnGap'],
+
+      inset: [
+        'insetBlockStart',
+        'insetInlineEnd',
+        'insetBlockEnd',
+        'insetInlineStart',
+      ],
+      insetBlock: ['insetBlockStart', 'insetBlockEnd'],
+      insetInline: ['insetInlineEnd', 'insetInlineStart'],
+    },
+  });
+
+type DefineResponsiveProperties = ReturnType<typeof defineResponsiveProperties>;
+
+export type ResponsiveValue<Value extends string | number> = ConditionalValue<
+  DefineResponsiveProperties,
+  Value
+>;
+
+export type DisplayValues =
+  keyof DefineResponsiveProperties['styles']['display']['values'];
+export type JustifyContentValues =
+  keyof DefineResponsiveProperties['styles']['justifyContent']['values'];
+export type AlignItemsValues =
+  keyof DefineResponsiveProperties['styles']['alignItems']['values'];
+export type AlignSelfValues =
+  keyof DefineResponsiveProperties['styles']['alignSelf']['values'];
+export type FlexDirectionValues =
+  keyof DefineResponsiveProperties['styles']['flexDirection']['values'];
+export type ColumnGapValues =
+  keyof DefineResponsiveProperties['styles']['columnGap']['values'];
+export type RowGapValues =
+  keyof DefineResponsiveProperties['styles']['rowGap']['values'];
+
+export type PaddingBlockStartValues =
+  keyof DefineResponsiveProperties['styles']['paddingBlockStart']['values'];
+export type PaddingBlockEndValues =
+  keyof DefineResponsiveProperties['styles']['paddingBlockEnd']['values'];
+export type PaddingInlineStartValues =
+  keyof DefineResponsiveProperties['styles']['paddingInlineStart']['values'];
+export type PaddingInlineEndValues =
+  keyof DefineResponsiveProperties['styles']['paddingInlineEnd']['values'];
+export type MarginBlockStartValues =
+  keyof DefineResponsiveProperties['styles']['marginBlockStart']['values'];
+export type MarginBlockEndValues =
+  keyof DefineResponsiveProperties['styles']['marginBlockEnd']['values'];
+export type MarginInlineStartValues =
+  keyof DefineResponsiveProperties['styles']['marginInlineStart']['values'];
+export type MarginInlineEndValues =
+  keyof DefineResponsiveProperties['styles']['marginInlineEnd']['values'];
+
+export type PositionValues =
+  keyof DefineResponsiveProperties['styles']['position']['values'];
+export type InsetBlockStartValues =
+  keyof DefineResponsiveProperties['styles']['insetBlockStart']['values'];
+export type InsetBlockEndValues =
+  keyof DefineResponsiveProperties['styles']['insetBlockEnd']['values'];
+export type InsetInlineStartValues =
+  keyof DefineResponsiveProperties['styles']['insetInlineStart']['values'];
+export type InsetInlineEndValues =
+  keyof DefineResponsiveProperties['styles']['insetInlineEnd']['values'];
+
+export type TextAlignValues =
+  keyof DefineResponsiveProperties['styles']['textAlign']['values'];
+
+export interface ResponsiveProperties {
+  /** Mapped to `display` css property */
+  display?: ResponsiveValue<DisplayValues>;
+  /** Mapped to `flex-direction` css property */
+  flexDirection?: ResponsiveValue<FlexDirectionValues>;
+  /** Mapped to `justify-content` css property */
+  justifyContent?: ResponsiveValue<JustifyContentValues>;
+  /** Mapped to `align-items` css property */
+  alignItems?: ResponsiveValue<AlignItemsValues>;
+  /** Mapped to `align-self` css property */
+  alignSelf?: ResponsiveValue<AlignSelfValues>;
+  /** Mapped to `column-gap` css property */
+  columnGap?: ResponsiveValue<ColumnGapValues>;
+  /** Mapped to `row-gap` css property */
+  rowGap?: ResponsiveValue<RowGapValues>;
+  /** Mapped to `gap` css property */
+  gap?: ResponsiveValue<ColumnGapValues | RowGapValues>;
+
+  /** Mapped to `padding-block-start` css property */
+  paddingBlockStart?: ResponsiveValue<PaddingBlockStartValues>;
+  /** Mapped to `padding-block-end` css property */
+  paddingBlockEnd?: ResponsiveValue<PaddingBlockEndValues>;
+  /** Mapped to `padding-inline-start` css property */
+  paddingInlineStart?: ResponsiveValue<PaddingInlineStartValues>;
+  /** Mapped to `padding-inline-end` css property */
+  paddingInlineEnd?: ResponsiveValue<PaddingInlineEndValues>;
+  /** Mapped to `padding` css property */
+  padding?: ResponsiveValue<PaddingBlockStartValues | PaddingInlineStartValues>;
+  /** Mapped to `padding-block` css property */
+  paddingBlock?: ResponsiveValue<
+    PaddingBlockStartValues | PaddingBlockEndValues
+  >;
+  /** Mapped to `padding-inline` css property */
+  paddingInline?: ResponsiveValue<
+    PaddingInlineStartValues | PaddingInlineEndValues
+  >;
+
+  /** Mapped to `margin-block-start` css property */
+  marginBlockStart?: ResponsiveValue<MarginBlockStartValues>;
+  /** Mapped to `margin-block-end` css property */
+  marginBlockEnd?: ResponsiveValue<MarginBlockEndValues>;
+  /** Mapped to `margin-inline-start` css property */
+  marginInlineStart?: ResponsiveValue<MarginInlineStartValues>;
+  /** Mapped to `margin-inline-end` css property */
+  marginInlineEnd?: ResponsiveValue<MarginInlineEndValues>;
+  /** Mapped to `margin` css property */
+  margin?: ResponsiveValue<MarginBlockStartValues | MarginInlineStartValues>;
+  /** Mapped to `margin-block` css property */
+  marginBlock?: ResponsiveValue<MarginBlockStartValues | MarginBlockEndValues>;
+  /** Mapped to `margin-inline` css property */
+  marginInline?: ResponsiveValue<
+    MarginInlineStartValues | MarginInlineEndValues
+  >;
+
+  /** Mapped to `position` css property */
+  position?: ResponsiveValue<PositionValues>;
+
+  /** Mapped to `inset-block-start` css property */
+  insetBlockStart?: ResponsiveValue<InsetBlockStartValues>;
+  /** Mapped to `inset-block-end` css property */
+  insetBlockEnd?: ResponsiveValue<InsetBlockEndValues>;
+  /** Mapped to `inset-inline-start` css property */
+  insetInlineStart?: ResponsiveValue<InsetInlineStartValues>;
+  /** Mapped to `inset-inline-end` css property */
+  insetInlineEnd?: ResponsiveValue<InsetInlineEndValues>;
+
+  /** Mapped to `text-align` css property */
+  textAlign?: ResponsiveValue<TextAlignValues>;
+}

package/src/styles/extract-sprinkles-props.ts

@@ -1,46 +1,40 @@
-import type { SprinklesProperties } from '@vanilla-extract/sprinkles';
-import type { UnknownRecord } from 'type-fest';
+import { UnknownRecord } from 'type-fest';
 
-/* eslint-disable-next-line @typescript-eslint/consistent-type-definitions */
-export interface SprinklesFnBase {
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  (...args: any): string;
-  properties: Set<string>;
+export interface SprinklesFnBase<TSprinklesProps = Record<string, unknown>> {
+  (props: TSprinklesProps): string;
+  properties: Set<Extract<keyof TSprinklesProps, string>>;
 }
 
-export type GetSprinkles<T extends SprinklesFnBase> = Parameters<T>[0];
+export type GetSprinkles<T extends SprinklesFnBase> =
+  T extends SprinklesFnBase<infer TSprinklesProps> ? TSprinklesProps : never;
 
-export type SprinklesProps<TSprinklesFnBase extends SprinklesFnBase> =
-  TSprinklesFnBase['properties'] extends Set<infer T>
-    ? {
-        [KeyType in keyof T]: T[KeyType] extends SprinklesProperties
-          ? KeyType
-          : never;
-      }
-    : never;
-
-/**
- * Extracts the sprinkles properties from the given component props,
- * returning an array containing the extracted sprinkle props and
- * the remaining component props.
- */
 export const extractSprinklesProps = <
-  ComponentProps extends UnknownRecord,
-  SprinklesFn extends SprinklesFnBase,
+  TProps extends UnknownRecord,
+  TSprinkles extends SprinklesFnBase,
 >(
-  props: ComponentProps,
-  sprinkles: SprinklesFn,
-) => {
-  const sprinkleProps: Record<string, unknown> = {};
-  const componentProps: Record<string, unknown> = {};
+  props: TProps,
+  sprinkles: TSprinkles,
+): [
+  Pick<TProps, Extract<keyof TProps, keyof GetSprinkles<TSprinkles>>>,
+  Omit<TProps, Extract<keyof TProps, keyof GetSprinkles<TSprinkles>>>,
+] => {
+  const sprinkleProps = {} as Pick<
+    TProps,
+    Extract<keyof TProps, keyof GetSprinkles<TSprinkles>>
+  >;
+  const componentProps = {} as Omit<
+    TProps,
+    Extract<keyof TProps, keyof GetSprinkles<TSprinkles>>
+  >;
 
-  for (const prop of Object.keys(props)) {
-    if (sprinkles.properties.has(prop)) {
-      sprinkleProps[prop] = props[prop];
-      continue;
+  for (const key of Object.keys(props) as (keyof TProps)[]) {
+    if (sprinkles.properties.has(key as string)) {
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      (sprinkleProps as any)[key] = props[key];
+    } else {
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      (componentProps as any)[key] = props[key];
     }
-
-    componentProps[prop] = props[prop];
   }
 
   return [sprinkleProps, componentProps];

package/src/styles/index.ts

@@ -13,3 +13,12 @@ export {
 } from './extract-sprinkles-props';
 
 export { mapContractVars } from './map-contract-vars';
+
+export {
+  defineResponsiveProperties,
+  type ResponsiveProperties,
+} from './define-responsive-properties';
+
+export { transition, type CreateTransitionFn } from './transition';
+
+export { visuallyHidden } from './visually-hidden.css';

package/src/styles/reset.css.ts

@@ -85,6 +85,7 @@ globalStyle('button', {
 globalStyle('a', {
   '@layer': {
     [base]: {
+      color: 'currentColor',
       textDecoration: 'none',
     },
   },

package/src/styles/system-contract.css.ts

@@ -28,8 +28,6 @@ export const sys = createThemeContract({
   color: {
     background: null,
     foreground: null,
-    muted: null,
-    outline: null,
   },
 
   state: {

package/src/styles/typography.css.ts

@@ -1,5 +1,6 @@
 import { styleVariants } from '@vanilla-extract/css';
 
+import { base } from './layers.css';
 import { sys, TypographySize, TypographyVariant } from './system-contract.css';
 
 export const typography = Object.entries(sys.typography).reduce(
@@ -8,11 +9,15 @@ export const typography = Object.entries(sys.typography).reduce(
       ...acc,
       [key]: styleVariants(value, (variant) => {
         return {
-          fontFamily: variant.font,
-          fontWeight: variant.weight,
-          lineHeight: variant.lineHeight,
-          letterSpacing: variant.tracking,
-          fontSize: variant.size,
+          '@layer': {
+            [base]: {
+              fontFamily: variant.font,
+              fontWeight: variant.weight,
+              lineHeight: variant.lineHeight,
+              letterSpacing: variant.tracking,
+              fontSize: variant.size,
+            },
+          },
         };
       }),
     };

package/src/styles/visually-hidden.css.ts

@@ -0,0 +1,21 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+export const visuallyHidden = recipe({
+  variants: {
+    hidden: {
+      true: {
+        position: 'absolute',
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: 'hidden',
+        clip: 'rect(0, 0, 0, 0)',
+        whiteSpace: 'nowrap',
+        wordWrap: 'normal',
+      },
+    },
+  },
+});

package/build-storybook.log

@@ -1,67 +0,0 @@
-
-> @kalink-ui/seedly@0.8.0 build-storybook /Users/louis/dev/kalink-ui/packages/seedly
-> storybook build --output-dir\=/tmp/chromatic--31226-9S6bTYf09Tsv --webpack-stats-json\=/tmp/chromatic--31226-9S6bTYf09Tsv
-
-@storybook/core v8.6.4
-
-info => Cleaning outputDir: ../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv
-info => Loading presets
-info => Building manager..
-info => Manager built (106 ms)
-info => Building preview..
-vite v6.2.1 building for production...
-transforming...
-✓ 172 modules transformed.
-rendering chunks...
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/iframe.html                                       17.54 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/layers.css.ts-C66eHa0l.css                  0.07 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/text-or75WcbY.css                           0.11 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/frame-wUsZLpNa.css                          0.38 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/grid-svOAN5eX.css                           0.84 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/seed-BSZyHzsv.css                           0.86 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/stack-fHq0j-Mf.css                          0.94 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/sidebar-BfSQAuXb.css                        0.95 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/center-DXS2n_JN.css                         1.03 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cover-ClXyrnXr.css                          1.03 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cluster-BYRTQ7OR.css                        1.04 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/switcher-CaEmo08Z.css                       1.15 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/box-C2bbsHZY.css                            1.38 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/typography.css.ts-SSimWp8t.css              2.25 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/button-Bz5cKKrj.css                         2.70 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-CT6mYyLc.js                         0.16 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-BtThajRf.js                         0.17 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-DoMOH9fu.js                         0.23 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/vanilla-extract-dynamic.esm-BUlnp6I2.js     0.31 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-caVMbCIR.js                         0.69 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/typography.css-DQ-nfkim.js                  0.75 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/index-ogSvIofg.js                           0.77 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/stack-CyXomRKS.js                           0.78 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cluster.stories-CPq7agrP.js                 0.82 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cluster-Dy3GR3gU.js                         0.94 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/frame.stories-5pt_eAa4.js                   0.98 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/clsx-yWx7DIeZ.js                            1.09 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/common-args-BxOi7vI0.js                     1.16 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/heading.stories-DnTp5v4g.js                 1.18 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/center.stories-DVx4loHB.js                  1.24 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/box.stories-D4I0_iYq.js                     1.31 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/text.stories-B94F4zrO.js                    1.38 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cover.stories-D5Tpwx4p.js                   1.44 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/switcher.stories-vZpJAqZC.js                1.62 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/grid.stories-Cg2miXZJ.js                    1.66 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/sidebar.stories-BsY8S9Y-.js                 1.87 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/createRuntimeFn-62c9670f.esm-BmIeg6ni.js    2.04 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/stack.stories-B3r3rUis.js                   2.14 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-A6H2BGQG.js                         3.40 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-xOAuwTm5.js                         4.87 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/seed.stories-OnvavYFI.js                    5.10 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-DY_pW_WS.js                         7.62 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/button.stories-CoUSjtPq.js                  7.87 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-CuLlOZat.js                         8.08 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/entry-preview-B0dZ39Bz.js                  38.10 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/react-18-Uoay0tNS.js                      177.34 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/iframe-2U23pR0X.js                        210.78 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/index-0CFqCGht.js                         658.80 kB
-✓ built in 1.79s
-info => Preview built (2.14 s)
-info => preview stats written to /tmp/chromatic--31226-9S6bTYf09Tsv/preview-stats.json
-info => Output directory: /tmp/chromatic--31226-9S6bTYf09Tsv