@infonomic/uikit 1.0.0

package/dist/components/button/button_module.css

@@ -0,0 +1,503 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  .button-IjDhC0 {
+    cursor: pointer;
+    text-align: center;
+    gap: var(--gap-2);
+    white-space: nowrap;
+    outline-offset: 2px;
+    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+    border: none;
+    outline: 2px solid #0000;
+    justify-content: center;
+    align-items: center;
+    font-weight: normal;
+    line-height: 0;
+    display: inline-flex;
+  }
+
+  .button-IjDhC0:disabled, .button-IjDhC0[disabled] {
+    pointer-events: none;
+  }
+
+  .button-IjDhC0:focus, .button-IjDhC0:active {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .button-IjDhC0.square-P_6yde {
+    aspect-ratio: 1;
+    border-radius: var(--border-radius-sm);
+    padding: 0;
+  }
+
+  .button-IjDhC0.round-uqus3n {
+    aspect-ratio: 1;
+    border-radius: var(--border-radius-full);
+    padding: 0;
+  }
+
+  .xs-jxTd5R {
+    min-height: 26px;
+    padding: .2rem .4rem;
+    font-size: .7rem;
+  }
+
+  .sm-uD_Ugt {
+    min-height: 32px;
+    padding: .25rem .5rem;
+    font-size: .775rem;
+  }
+
+  .md-Qp9ad6 {
+    min-height: 38px;
+    padding: .625rem 1.25rem;
+    font-size: .95rem;
+  }
+
+  .lg-FAYTen {
+    min-height: 46px;
+    padding: .75rem 1.5rem;
+    font-size: 1.1rem;
+  }
+
+  .xl-Gwvhl4 {
+    min-height: 54px;
+    padding: .75rem 1.5rem;
+    font-size: 1.2rem;
+  }
+
+  .filled-CwGsrO {
+    color: var(--button-variant-filled-foreground);
+    background-color: var(--button-variant-filled);
+  }
+
+  .filled-CwGsrO:hover {
+    background-color: var(--button-variant-filled-hover);
+  }
+
+  .filled-CwGsrO:focus, .filled-CwGsrO:active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .filled-CwGsrO:disabled, .filled-CwGsrO[disabled] {
+    background-color: oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * .85) h);
+    color: oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h);
+  }
+
+  .outlined-nZGbxu {
+    border: 1px solid var(--button-variant-outlined-border);
+    color: var(--button-variant-outlined-foreground);
+    background-color: var(--button-variant-outlined);
+  }
+
+  .outlined-nZGbxu:disabled, .outlined-nZGbxu[disabled] {
+    border-color: oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * .8) h);
+    color: oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h);
+  }
+
+  .outlined-nZGbxu:hover {
+    background-color: var(--button-variant-outlined-hover);
+  }
+
+  .outlined-nZGbxu:focus, .outlined-nZGbxu:active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .gradient-ySC3O3 {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end));
+  }
+
+  .gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled] {
+    background: unset;
+    background-color: oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * .85) h);
+    color: oklch(from var(--button-variant-gradient-foreground) calc(l * .9) calc(c * .85) h);
+  }
+
+  .gradient-ySC3O3:hover {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end));
+  }
+
+  .gradient-ySC3O3:focus, .gradient-ySC3O3:active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .text-GaxlcE {
+    background-color: var(--button-variant-text);
+    color: var(--button-variant-text-foreground);
+  }
+
+  .text-GaxlcE:disabled, .text-GaxlcE[disabled] {
+    color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * .5) h);
+  }
+
+  .text-GaxlcE:hover {
+    background-color: var(--button-variant-text-hover);
+  }
+
+  .text-GaxlcE:focus, .text-GaxlcE:active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .primary-tUmczz {
+    --button: var(--primary-600);
+    --button-ring-color: var(--button);
+  }
+
+  .primary-tUmczz.filled-CwGsrO {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * .9) c h);
+  }
+
+  .primary-tUmczz.outlined-nZGbxu {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--primary-700);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 2.15) calc(c * .2) h);
+    --button-variant-outlined-border: var(--primary-700);
+  }
+
+  .primary-tUmczz.text-GaxlcE {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+  }
+
+  .primary-tUmczz.gradient-ySC3O3 {
+    --button-variant-gradient-start: var(--primary-500);
+    --button-variant-gradient-end: var(--primary-700);
+    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .secondary-UqT2AY {
+    --button: var(--secondary-500);
+    --button-ring-color: var(--button);
+  }
+
+  .secondary-UqT2AY.filled-CwGsrO {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: black;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * .95) c h);
+  }
+
+  .secondary-UqT2AY.outlined-nZGbxu {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--secondary-950);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.6) calc(c * .2) h);
+    --button-variant-outlined-border: var(--secondary-700);
+  }
+
+  .secondary-UqT2AY.text-GaxlcE {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+  }
+
+  .secondary-UqT2AY.gradient-ySC3O3 {
+    --button-variant-gradient-start: var(--secondary-500);
+    --button-variant-gradient-end: var(--secondary-700);
+    --button-variant-gradient-foreground: black;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .noeffect-fpxSgg {
+    --button: var(--gray-100);
+    --button-ring-color: var(--gray-200);
+  }
+
+  .noeffect-fpxSgg.filled-CwGsrO {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: black;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * .95) c h);
+  }
+
+  .noeffect-fpxSgg.outlined-nZGbxu {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--gray-800);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 2.9) calc(c * .2) h);
+    --button-variant-outlined-border: var(--gray-500);
+  }
+
+  .noeffect-fpxSgg.text-GaxlcE {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * .5) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+  }
+
+  .noeffect-fpxSgg.gradient-ySC3O3 {
+    --button-variant-gradient-start: var(--gray-100);
+    --button-variant-gradient-end: var(--gray-200);
+    --button-variant-gradient-foreground: black;
+    --button-variant-gradient-hover: var(--gray-400);
+  }
+
+  .success-fTNDEn {
+    --button: var(--green-400);
+    --button-ring-color: var(--button);
+  }
+
+  .success-fTNDEn.filled-CwGsrO {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * .9) c h);
+  }
+
+  .success-fTNDEn.outlined-nZGbxu {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--green-600);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.6) calc(c * .2) h);
+    --button-variant-outlined-border: var(--green-600);
+  }
+
+  .success-fTNDEn.text-GaxlcE {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+  }
+
+  .success-fTNDEn.gradient-ySC3O3 {
+    --button-variant-gradient-start: var(--green-500);
+    --button-variant-gradient-end: var(--green-700);
+    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .info-qrdXQD {
+    --button: var(--blue-400);
+    --button-ring-color: var(--button);
+  }
+
+  .info-qrdXQD.filled-CwGsrO {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * .9) c h);
+  }
+
+  .info-qrdXQD.outlined-nZGbxu {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--blue-300);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.9) calc(c * .2) h);
+    --button-variant-outlined-border: var(--blue-500);
+  }
+
+  .info-qrdXQD.text-GaxlcE {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+  }
+
+  .info-qrdXQD.gradient-ySC3O3 {
+    --button-variant-gradient-start: var(--blue-500);
+    --button-variant-gradient-end: var(--blue-700);
+    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .warning-a00T3A {
+    --button: var(--yellow-300);
+    --button-ring-color: var(--button);
+  }
+
+  .warning-a00T3A.filled-CwGsrO {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: black;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * .95) c h);
+  }
+
+  .warning-a00T3A.outlined-nZGbxu {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--yellow-700);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.9) calc(c * .2) h);
+    --button-variant-outlined-border: var(--yellow-500);
+  }
+
+  .warning-a00T3A.text-GaxlcE {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * .6) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+  }
+
+  .warning-a00T3A.gradient-ySC3O3 {
+    --button-variant-gradient-start: var(--yellow-300);
+    --button-variant-gradient-end: var(--yellow-400);
+    --button-variant-gradient-foreground: black;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .danger-rwIV_i {
+    --button: var(--red-400);
+    --button-ring-color: var(--button);
+  }
+
+  .danger-rwIV_i.filled-CwGsrO {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * .9) c h);
+  }
+
+  .danger-rwIV_i.outlined-nZGbxu {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--red-500);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.8) calc(c * .3) h);
+    --button-variant-outlined-border: var(--red-500);
+  }
+
+  .danger-rwIV_i.text-GaxlcE {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
+    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+  }
+
+  .danger-rwIV_i.gradient-ySC3O3 {
+    --button-variant-gradient-start: var(--red-500);
+    --button-variant-gradient-end: var(--red-700);
+    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .fullWidth-wXvP0v {
+    width: 100%;
+    display: flex;
+  }
+
+  .dark .button-IjDhC0:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .button-IjDhC0:active:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --ring-offset-color: var(--background);
+  }
+
+  .dark .primary-tUmczz:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button: var(--primary-600);
+    --button-ring-color: var(--button);
+  }
+
+  .dark .primary-tUmczz.filled-CwGsrO:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * .9) c h);
+  }
+
+  .dark .primary-tUmczz.outlined-nZGbxu:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-outlined-foreground: var(--primary-100);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * .45) calc(c * .1) h);
+    --button-variant-outlined-border: var(--primary-500);
+  }
+
+  .dark .primary-tUmczz.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: var(--button);
+    --button-variant-text-hover: var(--canvas-800);
+  }
+
+  .dark .secondary-UqT2AY.outlined-nZGbxu:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-outlined-foreground: var(--secondary-500);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * .3) calc(c * .1) h);
+    --button-variant-outlined-border: var(--secondary-500);
+  }
+
+  .dark .secondary-UqT2AY.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-text-foreground: var(--button);
+    --button-variant-text-hover: var(--canvas-800);
+  }
+
+  .dark .noeffect-fpxSgg:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button: var(--gray-900);
+    --button-ring-color: var(--gray-900);
+  }
+
+  .dark .noeffect-fpxSgg.filled-CwGsrO:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-filled: var(--button);
+    --button-variant-filled-foreground: white;
+    --button-variant-filled-hover: oklch(from var(--button) calc(l * .95) c h);
+  }
+
+  .dark .noeffect-fpxSgg.outlined-nZGbxu:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--gray-300);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * .75) calc(c * .2) h);
+    --button-variant-outlined-border: var(--gray-500);
+  }
+
+  .dark .noeffect-fpxSgg.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-text: transparent;
+    --button-variant-text-foreground: var(--gray-300);
+    --button-variant-text-hover: var(--canvas-800);
+  }
+
+  .dark .noeffect-fpxSgg.gradient-ySC3O3:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-gradient-start: var(--gray-950);
+    --button-variant-gradient-end: var(--gray-900);
+    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-hover: var(--gray-900);
+  }
+
+  .dark .success-fTNDEn.outlined-nZGbxu:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-outlined-foreground: var(--green-500);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * .35) calc(c * .1) h);
+    --button-variant-outlined-border: var(--green-500);
+  }
+
+  .dark .success-fTNDEn.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-text-foreground: var(--button);
+    --button-variant-text-hover: var(--canvas-800);
+  }
+
+  .dark .info-qrdXQD.outlined-nZGbxu:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-outlined-foreground: var(--blue-300);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * .43) calc(c * .1) h);
+    --button-variant-outlined-border: var(--blue-500);
+  }
+
+  .dark .info-qrdXQD.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-text-foreground: var(--button);
+    --button-variant-text-hover: var(--canvas-800);
+  }
+
+  .dark .warning-a00T3A.outlined-nZGbxu:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-outlined-foreground: var(--yellow-500);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * .31) calc(c * .1) h);
+    --button-variant-outlined-border: var(--yellow-500);
+  }
+
+  .dark .warning-a00T3A.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-text-foreground: var(--button);
+    --button-variant-text-hover: var(--canvas-800);
+  }
+
+  .dark .danger-rwIV_i.outlined-nZGbxu:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-outlined-foreground: var(--red-500);
+    --button-variant-outlined-hover: oklch(from var(--button) calc(l * .4) calc(c * .1) h);
+    --button-variant-outlined-border: var(--red-500);
+  }
+
+  .dark .danger-rwIV_i.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --button-variant-text-foreground: var(--button);
+    --button-variant-text-hover: var(--canvas-800);
+  }
+
+  .dark .filled-CwGsrO:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .filled-CwGsrO[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    background-color: oklch(from var(--button-variant-filled) calc(l * .85) calc(c * .85) h);
+    color: oklch(from var(--button-variant-filled-foreground) calc(l * .85) calc(c * .85) h);
+  }
+
+  .dark .outlined-nZGbxu:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .outlined-nZGbxu[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    border-color: oklch(from var(--button-variant-outlined-border) calc(l * .8) calc(c * .8) h);
+    color: oklch(from var(--button-variant-outlined-foreground) calc(l * .8) calc(c * .8) h);
+  }
+
+  .dark .gradient-ySC3O3:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .gradient-ySC3O3[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    background: unset;
+    background-color: oklch(from var(--button-variant-gradient-end) calc(l * .85) calc(c * .85) h);
+    color: oklch(from var(--button-variant-gradient-foreground) calc(l * .85) calc(c * .85) h);
+  }
+
+  .dark .text-GaxlcE:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .text-GaxlcE[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    color: oklch(from var(--button-variant-text-foreground) calc(l * .85) calc(c * .85) h);
+  }
+}
+

package/dist/components/button/control-buttons.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+import type { Size } from './@types/button.js';
+type ButtonType = React.JSX.IntrinsicElements['button'];
+interface ControlButtonProps extends ButtonType {
+    size?: Size;
+    className?: string;
+    onClick?: () => void;
+    ref?: React.RefObject<HTMLButtonElement>;
+}
+interface DirectionalButtonProps extends ControlButtonProps {
+    direction: 'up' | 'down' | 'left' | 'right';
+}
+export declare const DirectionalButton: ({ size, direction, className, onClick, ref, ...rest }: DirectionalButtonProps) => React.JSX.Element;
+export declare const PlayButton: ({ size, className, onClick, ref, ...rest }: ControlButtonProps) => React.JSX.Element;
+export declare const StopButton: ({ size, className, onClick, ref, ...rest }: ControlButtonProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=control-buttons.d.ts.map

package/dist/components/button/control-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-buttons.d.ts","sourceRoot":"","sources":["../../../src/components/button/control-buttons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAE9C,KAAK,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;AAEvD,UAAU,kBAAmB,SAAQ,UAAU;IAC7C,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC;AAED,UAAU,sBAAuB,SAAQ,kBAAkB;IACzD,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;CAC5C;AAED,eAAO,MAAM,iBAAiB,GAAI,uDAO/B,sBAAsB,sBA0BxB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,4CAMxB,kBAAkB,sBA6BpB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,4CAMxB,kBAAkB,sBA+BpB,CAAA"}

package/dist/components/button/control-buttons.js

@@ -0,0 +1,88 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import control_buttons_module from "./control-buttons.module.js";
+const DirectionalButton = ({ size = 'md', direction, className, onClick, ref, ...rest })=>{
+    const handleClick = ()=>{
+        if (null != onClick) onClick();
+    };
+    return /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        ...rest,
+        onClick: handleClick,
+        type: "button",
+        "aria-label": direction,
+        className: classnames(control_buttons_module["directional-button"], control_buttons_module[direction], control_buttons_module[size], className),
+        children: /*#__PURE__*/ jsx("span", {
+            children: /*#__PURE__*/ jsx("svg", {
+                className: "icon",
+                focusable: "false",
+                "aria-hidden": "true",
+                viewBox: "0 0 51 32",
+                children: /*#__PURE__*/ jsx("path", {
+                    fill: "currentColor",
+                    d: "M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z"
+                })
+            })
+        })
+    });
+};
+const PlayButton = ({ size = 'md', className, onClick, ref, ...rest })=>{
+    const handleClick = ()=>{
+        if (null != onClick) onClick();
+    };
+    return /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        ...rest,
+        onClick: handleClick,
+        type: "button",
+        "aria-label": "play",
+        className: classnames(control_buttons_module["play-button"], control_buttons_module[size], className),
+        children: /*#__PURE__*/ jsx("span", {
+            children: /*#__PURE__*/ jsx("svg", {
+                className: "icon",
+                focusable: "false",
+                "aria-hidden": "true",
+                viewBox: "0 0 32 32",
+                children: /*#__PURE__*/ jsx("path", {
+                    d: "M12 8L26 16L12 24V8Z",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinejoin: "round"
+                })
+            })
+        })
+    });
+};
+const StopButton = ({ size = 'md', className, onClick, ref, ...rest })=>{
+    const handleClick = ()=>{
+        if (null != onClick) onClick();
+    };
+    return /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        ...rest,
+        onClick: handleClick,
+        type: "button",
+        "aria-label": "stop",
+        className: classnames(control_buttons_module["stop-button"], control_buttons_module[size], className),
+        children: /*#__PURE__*/ jsx("span", {
+            children: /*#__PURE__*/ jsx("svg", {
+                className: "icon",
+                focusable: "false",
+                "aria-hidden": "true",
+                viewBox: "0 0 32 32",
+                children: /*#__PURE__*/ jsx("rect", {
+                    x: "4",
+                    y: "4",
+                    width: "24",
+                    height: "24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "3"
+                })
+            })
+        })
+    });
+};
+export { DirectionalButton, PlayButton, StopButton };

package/dist/components/button/control-buttons.module.js

@@ -0,0 +1,20 @@
+import "./control-buttons_module.css";
+const control_buttons_module = {
+    "stop-button": "stop-button-krMTsl",
+    stopButton: "stop-button-krMTsl",
+    "play-button": "play-button-GfHYHO",
+    playButton: "play-button-GfHYHO",
+    "directional-button": "directional-button-kGS8rA",
+    directionalButton: "directional-button-kGS8rA",
+    icon: "icon-k646_6",
+    xs: "xs-lujClY",
+    sm: "sm-Ay8zIA",
+    md: "md-wBr0Jw",
+    lg: "lg-idpovR",
+    xl: "xl-jHgaWE",
+    up: "up-fGNcdy",
+    down: "down-y1K3Vt",
+    left: "left-B6s4j6",
+    right: "right-nFxLqo"
+};
+export { control_buttons_module as default };