@licklist/design 0.78.21 → 0.78.26

package/src/v2/components/Colors/Sizes.stories.tsx

@@ -1,141 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import React from 'react'
-
-export default {
-    title: 'v2/Design System/Size Tokens',
-    parameters: {
-        layout: 'padded',
-    },
-} as Meta
-
-type Story = StoryObj
-
-export const Radius: Story = {
-    render: () => (
-        <div>
-            <h2>Radius Tokens - Border Radius</h2>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: '24px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
-                        zero
-                    </div>
-                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-zero)', backgroundColor: '#121e52' }} />
-                    <div style={{ flex: 1 }} />
-                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>0px</div>
-                </div>
-
-                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
-                        xs
-                    </div>
-                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-xs)', backgroundColor: '#121e52' }} />
-                    <div style={{ flex: 1 }} />
-                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>1px</div>
-                </div>
-
-                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
-                        sm
-                    </div>
-                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-sm)', backgroundColor: '#121e52' }} />
-                    <div style={{ flex: 1 }} />
-                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>2px</div>
-                </div>
-
-                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
-                        md
-                    </div>
-                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-md)', backgroundColor: '#121e52' }} />
-                    <div style={{ flex: 1 }} />
-                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>4px</div>
-                </div>
-
-                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
-                        reg
-                    </div>
-                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-reg)', backgroundColor: '#121e52' }} />
-                    <div style={{ flex: 1 }} />
-                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>8px</div>
-                </div>
-
-                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
-                        lg
-                    </div>
-                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-lg)', backgroundColor: '#121e52' }} />
-                    <div style={{ flex: 1 }} />
-                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>16px</div>
-                </div>
-
-                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
-                        xl
-                    </div>
-                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-xl)', backgroundColor: '#121e52' }} />
-                    <div style={{ flex: 1 }} />
-                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>24px</div>
-                </div>
-            </div>
-        </div>
-    ),
-}
-
-export const Spacing: Story = {
-    render: () => (
-        <div>
-            <h2>Spacing Tokens</h2>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: '24px' }}>
-                {[
-                    { token: 'zero', value: '0px' },
-                    { token: 'xxs', value: '1px' },
-                    { token: 'xs', value: '2px' },
-                    { token: 'sm', value: '4px' },
-                    { token: 'md', value: '8px' },
-                    { token: 'reg', value: '16px' },
-                    { token: 'lg', value: '24px' },
-                    { token: 'xl', value: '32px' },
-                    { token: 'xxl', value: '64px' },
-                    { token: 'super', value: '128px' },
-                ].map(({ token, value }) => (
-                    <div key={token} style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-                        <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '80px' }}>
-                            {token}
-                        </div>
-                        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
-                            <div style={{ width: '32px', height: '32px', backgroundColor: '#121e52', borderRadius: '4px' }} />
-                            <div style={{ height: '32px', backgroundColor: '#1f9ab5', opacity: 0.4, width: value, borderLeft: '1px solid #71e6ff', borderRight: '1px solid #71e6ff' }} />
-                            <div style={{ width: '32px', height: '32px', backgroundColor: '#121e52', borderRadius: '4px' }} />
-                        </div>
-                        <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right', minWidth: '60px' }}>{value}</div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    ),
-}
-
-export const Opacity: Story = {
-    render: () => (
-        <div>
-            <h2>Opacity Tokens</h2>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: '16px', marginTop: '24px' }}>
-                {[100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0].map((opacity) => (
-                    <div key={opacity} style={{ textAlign: 'center' }}>
-                        <div style={{ width: '94px', height: '94px', backgroundColor: '#121e52', opacity: `var(--opacity-${opacity})`, border: '1px solid #e8e9ef', borderRadius: '47px', margin: '0 auto 16px' }} />
-                        <div style={{ fontFamily: 'Geist', fontSize: '15px', fontWeight: 600, color: '#121e52', marginBottom: '8px' }}>
-                            {opacity}%
-                        </div>
-                        <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', backgroundColor: '#e8e9ef', padding: '4px 8px', borderRadius: '4px', display: 'inline-block' }}>
-                            {opacity}
-                        </div>
-                    </div>
-                ))}
-            </div>
-            <p style={{ marginTop: '24px', fontFamily: 'Geist', fontSize: '18px', color: '#121e52' }}>
-                We can interpolate for more refined opacities between the bands eg: 23% = 23 token value.
-            </p>
-        </div>
-    ),
-}

package/src/v2/components/Colors/index.ts

@@ -1,2 +0,0 @@
-export { ColorsShowcase, ColorSwatch } from './Colors'
-export type { ColorGroup } from './Colors'

package/src/v2/components/Typography/Typography.scss

@@ -1,72 +0,0 @@
-@import '../../styles/tokens/typography';
-
-.typography {
-  margin: 0;
-  padding: 0;
-}
-
-// Heading styles
-.typography-heading-xxl {
-  @include typography('heading.xxl');
-}
-
-.typography-heading-xl {
-  @include typography('heading.xl');
-}
-
-.typography-heading-h1 {
-  @include typography('heading.h1');
-}
-
-.typography-heading-h2 {
-  @include typography('heading.h2');
-}
-
-.typography-heading-h3 {
-  @include typography('heading.h3');
-}
-
-.typography-heading-h4 {
-  @include typography('heading.h4');
-}
-
-.typography-heading-h5 {
-  @include typography('heading.h5');
-}
-
-.typography-heading-h6 {
-  @include typography('heading.h6');
-}
-
-// Body text styles
-.typography-text-xl {
-  @include typography('text.xl');
-}
-
-.typography-text-large {
-  @include typography('text.large');
-}
-
-.typography-text-regular {
-  @include typography('text.regular');
-}
-
-.typography-text-small {
-  @include typography('text.small');
-}
-
-.typography-text-small-emphasis {
-  @include typography('text.small.emphasis');
-}
-
-.typography-text-small-bold {
-  @include typography('text.small.bold');
-}
-
-.typography-text-xs {
-  @include typography('text.xs');
-}
-
-.typography-text-xs-bold {
-  @include typography('text.xs.bold');
-}

package/src/v2/components/Typography/Typography.stories.tsx

@@ -1,266 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import React from 'react'
-import { Typography } from './Typography'
-
-export default {
-  title: 'v2/Design System/Typography',
-  component: Typography,
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: [
-        'heading.xxl',
-        'heading.xl',
-        'heading.h1',
-        'heading.h2',
-        'heading.h3',
-        'heading.h4',
-        'heading.h5',
-        'heading.h6',
-        'text.xl',
-        'text.large',
-        'text.regular',
-        'text.small',
-        'text.small.emphasis',
-        'text.small.bold',
-        'text.xs',
-        'text.xs.bold'
-      ],
-      description: 'Typography variant to apply',
-    },
-    as: {
-      control: 'select',
-      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'],
-      description: 'HTML element to render as',
-    },
-    color: {
-      control: 'color',
-      description: 'Custom text color',
-    },
-  },
-  parameters: {
-    layout: 'padded',
-  },
-} as Meta
-
-type Story = StoryObj<typeof Typography>
-
-// Headings
-export const HeadingXXL: Story = {
-  args: {
-    variant: 'heading.xxl',
-    children: 'The all-in-one booking platform for Leisure and Hospitality Venues',
-    as: 'h1',
-  },
-}
-
-export const HeadingXL: Story = {
-  args: {
-    variant: 'heading.xl',
-    children: 'Extra Large Heading',
-    as: 'h1',
-  },
-}
-
-export const HeadingH1: Story = {
-  args: {
-    variant: 'heading.h1',
-    children: 'H1 - Large Heading',
-    as: 'h1',
-  },
-}
-
-export const HeadingH2: Story = {
-  args: {
-    variant: 'heading.h2',
-    children: 'H2 - Heading',
-    as: 'h2',
-  },
-}
-
-export const HeadingH3: Story = {
-  args: {
-    variant: 'heading.h3',
-    children: 'H3 - Heading',
-    as: 'h3',
-  },
-}
-
-export const HeadingH4: Story = {
-  args: {
-    variant: 'heading.h4',
-    children: 'H4 - Heading',
-    as: 'h4',
-  },
-}
-
-export const HeadingH5: Story = {
-  args: {
-    variant: 'heading.h5',
-    children: 'H5 - Small Heading',
-    as: 'h5',
-  },
-}
-
-export const HeadingH6: Story = {
-  args: {
-    variant: 'heading.h6',
-    children: 'H6 - XS Heading',
-    as: 'h6',
-  },
-}
-
-// Body Text
-export const BodyTextXL: Story = {
-  args: {
-    variant: 'text.xl',
-    children: 'This is extra large body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.',
-    as: 'p',
-  },
-}
-
-export const BodyTextLarge: Story = {
-  args: {
-    variant: 'text.large',
-    children: 'This is large body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis.',
-    as: 'p',
-  },
-}
-
-export const BodyTextRegular: Story = {
-  args: {
-    variant: 'text.regular',
-    children: 'This is regular body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.',
-    as: 'p',
-  },
-}
-
-export const BodyTextSmall: Story = {
-  args: {
-    variant: 'text.small',
-    children: 'This is small body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.',
-    as: 'p',
-  },
-}
-
-export const BodyTextSmallEmphasis: Story = {
-  args: {
-    variant: 'text.small.emphasis',
-    children: 'This is small body copy text with emphasis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
-    as: 'p',
-  },
-}
-
-export const BodyTextSmallBold: Story = {
-  args: {
-    variant: 'text.small.bold',
-    children: 'This is small body copy text in bold. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
-    as: 'p',
-  },
-}
-
-export const BodyTextXS: Story = {
-  args: {
-    variant: 'text.xs',
-    children: 'This is extra small body copy text. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
-    as: 'p',
-  },
-}
-
-export const BodyTextXSBold: Story = {
-  args: {
-    variant: 'text.xs.bold',
-    children: 'This is extra small body copy text in bold. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
-    as: 'p',
-  },
-}
-
-// Showcase all variations
-export const AllHeadingVariations: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-      <Typography variant="heading.xxl" as="h1">
-        XXL Heading
-      </Typography>
-      <Typography variant="heading.xl" as="h1">
-        XL Heading
-      </Typography>
-      <Typography variant="heading.h1" as="h1">
-        H1 - Large Heading
-      </Typography>
-      <Typography variant="heading.h2" as="h2">
-        H2 - Heading
-      </Typography>
-      <Typography variant="heading.h3" as="h3">
-        H3 - Heading
-      </Typography>
-      <Typography variant="heading.h4" as="h4">
-        H4 - Heading
-      </Typography>
-      <Typography variant="heading.h5" as="h5">
-        H5 - Small Heading
-      </Typography>
-      <Typography variant="heading.h6" as="h6">
-        H6 - XS Heading
-      </Typography>
-    </div>
-  ),
-}
-
-export const AllBodyVariations: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <Typography variant="text.xl" as="p">
-        Extra large body copy text
-      </Typography>
-      <Typography variant="text.large" as="p">
-        Large body copy text
-      </Typography>
-      <Typography variant="text.regular" as="p">
-        Regular body copy text
-      </Typography>
-      <Typography variant="text.small" as="p">
-        Small body copy text
-      </Typography>
-      <Typography variant="text.small.emphasis" as="p">
-        Small body copy text with emphasis
-      </Typography>
-      <Typography variant="text.small.bold" as="p">
-        Small body copy text in bold
-      </Typography>
-      <Typography variant="text.xs" as="p">
-        Extra small body copy text
-      </Typography>
-      <Typography variant="text.xs.bold" as="p">
-        Extra small body copy text in bold
-      </Typography>
-    </div>
-  ),
-}
-
-// Usage examples
-export const UsageExample: Story = {
-  render: () => (
-    <div style={{ padding: '24px' }}>
-      <Typography variant="heading.h1" as="h1">
-        Page Title
-      </Typography>
-      <Typography variant="text.regular" as="p" className="mt-3">
-        This is regular body text that flows naturally below the heading.
-      </Typography>
-      <Typography variant="heading.h2" as="h2" className="mt-8">
-        Section Heading
-      </Typography>
-      <Typography variant="text.regular" as="p" className="mt-3">
-        This is another paragraph of regular text that provides additional context
-        and details for the section above.
-      </Typography>
-      <Typography variant="heading.h4" as="h4" className="mt-6">
-        Subsection
-      </Typography>
-      <Typography variant="text.small" as="p" className="mt-2">
-        This is small text used for less prominent information.
-      </Typography>
-    </div>
-  ),
-}

package/src/v2/components/Typography/Typography.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-
-export type TypographyVariant = 
-  | 'heading.xxl'
-  | 'heading.xl'
-  | 'heading.h1'
-  | 'heading.h2'
-  | 'heading.h3'
-  | 'heading.h4'
-  | 'heading.h5'
-  | 'heading.h6'
-  | 'text.xl'
-  | 'text.large'
-  | 'text.regular'
-  | 'text.small'
-  | 'text.small.emphasis'
-  | 'text.small.bold'
-  | 'text.xs'
-  | 'text.xs.bold'
-
-export interface TypographyProps {
-  variant?: TypographyVariant
-  className?: string
-  children: React.ReactNode
-  as?: keyof JSX.IntrinsicElements
-  color?: string
-}
-
-export const Typography: React.FC<TypographyProps> = ({
-  variant = 'text.regular',
-  className = '',
-  children,
-  as = 'p',
-  color
-}) => {
-  const Component = as
-  
-  const getTypographyClass = (variant: TypographyVariant): string => {
-    const baseClass = `typography-${variant.replace(/\./g, '-')}`
-    return baseClass
-  }
-
-  const classes = [
-    'typography',
-    getTypographyClass(variant),
-    className
-  ].filter(Boolean).join(' ')
-
-  const style = color ? { color } : {}
-
-  return (
-    <Component className={classes} style={style}>
-      {children}
-    </Component>
-  )
-}

package/src/v2/components/Typography/index.ts

@@ -1,2 +0,0 @@
-export { Typography } from './Typography'
-export type { TypographyProps, TypographyVariant } from './Typography'