@wallarm-org/design-system 0.40.0 → 0.41.0

package/dist/components/Logo/IconPath.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const LogoIconPath: FC;

package/dist/components/Logo/IconPath.js

@@ -0,0 +1,6 @@
+import { jsx } from "react/jsx-runtime";
+const LogoIconPath = ()=>/*#__PURE__*/ jsx("path", {
+        d: "M0 6.39923L15.0757 0V9.02234L26.0197 4.37665V10.9873L34.0428 7.58107V12.4237L26.0197 15.8299V12.9234L15.0757 17.5691V13.6104L0 20V6.39923Z",
+        fill: "currentColor"
+    });
+export { LogoIconPath };

package/dist/components/Logo/Logo.d.ts

@@ -0,0 +1,12 @@
+import type { FC, Ref, SVGProps } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { logoVariants } from './classes';
+import type { LogoStyle, LogoType } from './types';
+type LogoVariantProps = VariantProps<typeof logoVariants>;
+export interface LogoProps extends Omit<SVGProps<SVGSVGElement>, 'type'>, LogoVariantProps {
+    ref?: Ref<SVGSVGElement>;
+    type?: LogoType;
+    color?: LogoStyle;
+}
+export declare const Logo: FC<LogoProps>;
+export {};

package/dist/components/Logo/Logo.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { logoVariants } from "./classes.js";
+import { LogoIconPath } from "./IconPath.js";
+import { LogoWordmarkPath } from "./WordmarkPath.js";
+const VIEW_BOXES = {
+    icon: '0 0 34 20',
+    wordmark: '0 0 75 20',
+    full: '0 0 118 20'
+};
+const MARK_COLOR = {
+    default: 'text-[var(--color-component-logo-ic)]',
+    white: 'text-[var(--color-component-logo-ic)]',
+    'full-white': 'text-white'
+};
+const WORDMARK_COLOR = {
+    default: 'text-[var(--color-component-logo-wordmark)]',
+    white: 'text-white',
+    'full-white': 'text-white'
+};
+const Logo = ({ ref, type = 'full', color = 'default', size = 'lg', className, ...props })=>/*#__PURE__*/ jsxs("svg", {
+        ...props,
+        ref: ref,
+        "data-slot": "logo",
+        viewBox: VIEW_BOXES[type],
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: cn(logoVariants({
+            size
+        }), 'w-auto', className),
+        children: [
+            ('icon' === type || 'full' === type) && /*#__PURE__*/ jsx("g", {
+                className: MARK_COLOR[color],
+                children: /*#__PURE__*/ jsx(LogoIconPath, {})
+            }),
+            ('wordmark' === type || 'full' === type) && /*#__PURE__*/ jsx("g", {
+                className: WORDMARK_COLOR[color],
+                transform: 'full' === type ? 'translate(38, 0)' : void 0,
+                children: /*#__PURE__*/ jsx(LogoWordmarkPath, {})
+            })
+        ]
+    });
+Logo.displayName = 'Logo';
+export { Logo };

package/dist/components/Logo/WordmarkPath.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const LogoWordmarkPath: FC;

package/dist/components/Logo/WordmarkPath.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+const LogoWordmarkPath = ()=>/*#__PURE__*/ jsx("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M7.39274 6.09793H9.499L12.137 14.012L14.2433 6.09793H16.8813L13.1902 17.7032H11.0839L8.44587 9.78909L5.80784 17.7032H3.70158L0 6.09793H2.63803L4.74428 14.012L7.38232 6.09793H7.39274ZM21.2502 15.9827C22.9811 15.9827 24.2741 15.013 24.2741 13.5845V12.8651C23.6067 12.6044 22.6787 12.4063 21.6569 12.4063C20.0198 12.4063 19.0397 13.0736 19.0397 14.2414V14.2831C19.0397 15.3675 20.0094 15.9723 21.2398 15.9723L21.2502 15.9827ZM18.4662 6.69227C19.4359 6.34818 20.4995 6.12922 21.8967 6.12922C25.2646 6.12922 26.9121 7.80796 26.9121 10.8526V17.7136H24.2741V16.3164C23.492 17.2444 22.3555 17.9534 20.6246 17.9534C18.4662 17.9534 16.5685 16.723 16.5685 14.4291V14.3874C16.5685 11.9266 18.5392 10.7171 21.1877 10.7171C22.5745 10.7171 23.3878 10.9152 24.2741 11.1967V10.9152C24.2741 9.34073 23.3461 8.47529 21.5318 8.47529C20.3535 8.47529 19.4151 8.72554 18.4662 9.10091V6.71313V6.69227ZM28.497 17.7032V1.875H31.135V17.7032H28.497ZM32.7199 17.7032V1.875H35.358L35.4101 17.7032H32.7199ZM41.3118 15.9827C43.0427 15.9827 44.3356 15.013 44.3356 13.5845V12.8651C43.6683 12.6044 42.7403 12.4063 41.7184 12.4063C40.0814 12.4063 39.1012 13.0736 39.1012 14.2414V14.2831C39.1012 15.3675 40.071 15.9723 41.3013 15.9723L41.3118 15.9827ZM38.5278 6.69227C39.487 6.34818 40.561 6.12922 41.9582 6.12922C45.3262 6.12922 46.9632 7.80796 46.9632 10.8526V17.7136H44.3252V16.3164C43.5431 17.2444 42.4066 17.9534 40.6757 17.9534C38.5173 17.9534 36.6196 16.723 36.6196 14.4291V14.3874C36.6196 11.9266 38.5903 10.7171 41.2388 10.7171C42.6256 10.7171 43.4389 10.9152 44.3252 11.1967V10.9152C44.3252 9.34073 43.3972 8.47529 41.5829 8.47529C40.4046 8.47529 39.4662 8.72554 38.5173 9.10091V6.71313L38.5278 6.69227ZM48.5481 17.7032V6.09793H51.1861V8.6734C51.8952 6.96338 53.1881 5.79555 55.1901 5.88939V8.65255H55.0441C52.7502 8.65255 51.1861 10.1436 51.1861 13.1674V17.7136H48.5481V17.7032ZM73.8857 10.227V17.7136H71.2477V11.1759C71.2477 9.36159 70.4344 8.23547 68.9642 8.23547C67.494 8.23547 66.5034 9.34073 66.5034 11.1759V17.7136H63.8654V11.0091C63.8654 9.23646 63.0521 8.23547 61.6027 8.23547C60.1534 8.23547 59.1107 9.40329 59.1107 11.1759V17.7136H56.4726V6.09793H59.1107V7.82882C59.851 6.8174 60.8832 5.85811 62.635 5.85811C64.272 5.85811 65.419 6.66099 66.0238 7.87052C66.9518 6.66099 68.1613 5.85811 69.8922 5.85811C72.3738 5.85811 73.8857 7.43259 73.8857 10.227Z",
+        fill: "currentColor"
+    });
+export { LogoWordmarkPath };

package/dist/components/Logo/classes.d.ts

@@ -0,0 +1,3 @@
+export declare const logoVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Logo/classes.js

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority";
+const logoVariants = cva('inline-block shrink-0', {
+    variants: {
+        size: {
+            xs: 'h-[10px]',
+            sm: 'h-[12px]',
+            md: 'h-[16px]',
+            lg: 'h-[20px]',
+            xl: 'h-[24px]',
+            '2xl': 'h-[32px]'
+        }
+    },
+    defaultVariants: {
+        size: 'lg'
+    }
+});
+export { logoVariants };

package/dist/components/Logo/index.d.ts

@@ -0,0 +1,2 @@
+export { Logo, type LogoProps } from './Logo';
+export type { LogoSize, LogoStyle, LogoType } from './types';

package/dist/components/Logo/index.js

@@ -0,0 +1,2 @@
+import { Logo } from "./Logo.js";
+export { Logo };

package/dist/components/Logo/types.d.ts

@@ -0,0 +1,5 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { logoVariants } from './classes';
+export type LogoType = 'icon' | 'wordmark' | 'full';
+export type LogoStyle = 'default' | 'white' | 'full-white';
+export type LogoSize = NonNullable<VariantProps<typeof logoVariants>['size']>;

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export { type DatacenterKey, datacenters, Ip, IpAddress, type IpAddressProps, Ip
 export { Kbd, KbdGroup } from './components/Kbd';
 export { Link, type LinkProps } from './components/Link';
 export { Loader, type LoaderProps } from './components/Loader';
+export { Logo, type LogoProps, type LogoSize, type LogoStyle, type LogoType, } from './components/Logo';
 export { NavRail, NavRailBody, type NavRailBodyProps, NavRailFooter, type NavRailFooterProps, NavRailItem, type NavRailItemProps, type NavRailProps, NavRailSeparator, type NavRailSeparatorProps, } from './components/NavRail';
 export { NumberInput, type NumberInputProps } from './components/NumberInput';
 export { NumericBadge, type NumericBadgeProps, } from './components/NumericBadge';

package/dist/index.js

@@ -27,6 +27,7 @@ import { Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, datacenters, prox
 import { Kbd, KbdGroup } from "./components/Kbd/index.js";
 import { Link } from "./components/Link/index.js";
 import { Loader } from "./components/Loader/index.js";
+import { Logo } from "./components/Logo/index.js";
 import { NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator } from "./components/NavRail/index.js";
 import { NumberInput } from "./components/NumberInput/index.js";
 import { NumericBadge } from "./components/NumericBadge/index.js";
@@ -58,4 +59,4 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/in
 import { TopHeader, TopHeaderActions, TopHeaderLogo } from "./components/TopHeader/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, ParameterPath, Popover, PopoverContent, PopoverTrigger, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, ParameterPath, Popover, PopoverContent, PopoverTrigger, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };